RTL support is slightly broken for Safari and Edge
See original GitHub issueBased on the Mozilla docs it looks like Chrome is reports incorrect values for scrollLeft
when the direction is “rtl”:
If the element’s direction is rtl (right-to-left), then scrollLeft is 0 when the scrollbar is at its rightmost position (at the start of the scrolled content), and then increasingly negative as you scroll towards the end of the content.
Rather than reporting a range of <= 0, Chrome reports the distance in pixels measured from the left. (View the console output in this repro case.)
I’ve tried to accommodate this broken behavior (fb15909 and dcb9c55) but the fix is kludgy.
It also doesn’t fully work for Safari and Edge:
- Go to the demo page
- Scroll left a bit
- Scroll back right
It looks like when the scroll position reaches the right, the scrollLeft
value sometimes rolls over from 0 to a really high number, causing the list to blank out.
I am not very familiar with RTL layouts. Help would be appreciated.
Issue Analytics
- State:
- Created 5 years ago
- Comments:14 (14 by maintainers)
Top GitHub Comments
I think #198 is as a result of the manipulation of scrollLeft to calculate the offset for this issue. The onScroll event emitted by the grid has the manipulated offset value rather than the scrollLeft position that the browser being used understands. If it were possible to keep the normalisation of the offset internal to react-window #198 would be at least partially fixed. Would it be useful to use a library such as https://github.com/alitaheri/normalize-scroll-left to work around these issues?
As far as I can see your fix means that when used in RTL anyone using the onScroll methods can only use the scrollLeft value contained in them for driving another react-window component because the scrollLeft values represent react-window’s normalized version of the browser’s scrollLeft value. That’s fine but should probably be documented in the descriptions of onScroll.