-
Notifications
You must be signed in to change notification settings - Fork 32
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: Console History Not Scrolling to Bottom (DH-14062) #1481
Conversation
Codecov ReportPatch coverage has no change and project coverage change:
Additional details and impacted files@@ Coverage Diff @@
## main #1481 +/- ##
==========================================
- Coverage 45.77% 45.74% -0.04%
==========================================
Files 517 516 -1
Lines 35116 35097 -19
Branches 8792 8787 -5
==========================================
- Hits 16076 16055 -21
- Misses 18989 18991 +2
Partials 51 51
Flags with carried forward coverage won't be shown. Click here to find out more.
☔ View full report in Codecov by Sentry. |
packages/console/src/Console.tsx
Outdated
if (!force && pane.scrollTop < pane.scrollHeight - pane.offsetHeight) { | ||
if ( | ||
!force && | ||
Math.round(pane.scrollTop) < pane.scrollHeight - pane.offsetHeight |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think use Math.ceil
instead to be safe:
Math.round(pane.scrollTop) < pane.scrollHeight - pane.offsetHeight | |
Math.ceil(pane.scrollTop) < pane.scrollHeight - pane.offsetHeight |
Although - I'm unable to consistently reproduce with the snippet you provided, as I believe it is dependent on the size of the console (which is dependent on browser size etc). I'm not certain this is the "correct" fix. I think instead we should be checking the size within the requestAnimationFrame
... as I'm fairly certain the issue is that we're not checking the updated scrollHeight at this point.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
MDN has an example on checking an element is totally scrolled here. We should also use clientHeight
instead of offsetHeight
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Another reproducer is to simply print something and sleep a little in a loop:
for (int ii = 0; ii < 100; ++ii) {
println("test line " + ii)
Thread.sleep(20)
}
The fix I originally gave Don was:
pane.scrollTop + 1 < pane.scrollHeight - pane.offsetHeight
(noting the +1
).
Interestingly the MDN article states:
scrollTop is a non-rounded number, while scrollHeight and clientHeight are rounded — so the only way to determine if the scroll area is scrolled to the bottom is by seeing if the scroll amount is close enough to some threshold (in this example 1):
Math.abs(element.scrollHeight - element.clientHeight - element.scrollTop) < 1;
The following will not work all the time because scrollTop can contain decimals:
element.scrollHeight - Math.abs(element.scrollTop) === element.clientHeight;
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I still can't consistently reproduce, even with your snippet (testing on latest prod), though I've definitely seen this issue before.
May as well follow the MDN article and add a comment linking to it (use clientHeight
, +1)
cc97647
to
9e733d7
Compare
I discovered DH-14062 independently and found that this method occasionally was prematurely returning when the view should stay stuck to the bottom of the contents.
Sometimes
pane.scrollTop
is sometimes 0.5 less than the expected value when tailing the content. ThisMath.round
bumps it up. I only sawxxxxx.0
andxxxxx.5
values during investigation, but I did not do any further research on the origin of the value or the rounding error.Here is a sample groovy snippet that reproduces 100% of the time: