Popover.Pane doesn't handle onScrolledToBottom properly

[anasyusef]

Issue summary

Popover.Pane component doesn't handle the onScrolledToBottom event properly on some screens.

Digging further into this problem. I noticed that Popover.Pane can be composed of the Scrollable component and that component has a handleScroll handler where it checks if it has scrolled to the bottom (const hasScrolledToBottom = scrollHeight - scrollTop === clientHeight;)

This condition doesn't become true thus not triggering the event due to scrollHeight - scrollTop coming very close but not equal to clientHeight. When I tested it, scrollHeight - scrollTop = 295.2 and clientHeight = 295

Expected behavior

Actual behavior

Steps to reproduce the problem

The code is taken from the official Polaris example on 'Popover with lazy loaded list'
It works on certain screens. Not really sure what is the root cause.

I tried it on the following screens:

1600 x 900 (Works)
2560 x 1440 (Doesn't work)
1920 x 1080 (Doesn't work)

Reduced test case

https://codesandbox.io/s/incsl?module=App.js

👋 Thanks for opening your first issue. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines.

[rorz]

Looks to me like this has the same root cause as #3225, and as you have identified, it seems to be coming from this line:

polaris-react/src/components/Scrollable/Scrollable.tsx

Line 163 in 6e4d068

const hasScrolledToBottom = scrollHeight - scrollTop === clientHeight;

Have tested it locally by changing the === to a <= (somewhat counter-intuitive due to the calculation being inverted) and it seems to fix it for me.

It is worth pointing out that I could reprod this by adjusting the page-zoom on Chrome, by zooming-out, and then the onScrolledToBottom callback breaks.

Will make a PR for it.

[alex-page]

@rorz @anasyusef is this still an issue? I can't replicate it with this codesandbox. https://codesandbox.io/s/floral-sun-rzebp1?file=/index.js

Feel free to reopen if it is an issue.