question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

RTL support is slightly broken for Safari and Edge

See original GitHub issue

Based 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:

  1. Go to the demo page
  2. Scroll left a bit
  3. 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:closed
  • Created 5 years ago
  • Comments:14 (14 by maintainers)

github_iconTop GitHub Comments

1reaction
MarkFalconbridgecommented, Apr 4, 2019

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?

0reactions
MarkFalconbridgecommented, May 29, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Right-to-left Styling - RTL Styling 101
An extensive guide on how to style for RTL in CSS. ... At the time of writing, it's not supported in Safari, old...
Read more >
Position sticky with direction rtl not working - Stack Overflow
Managed to find a workaround by using an extra container div, which seems to work fine on Chrome (v93), but still fails in...
Read more >
Safari Technology Preview Release Notes - Apple Developer
Allowed Service Workers to run for a little longer in the case of functional events ... Fixed RTL for an out of flow...
Read more >
Known issues and workarounds (Dynamics 365 Marketing)
Right-to-left (RTL) language support currently has the following limitations: the segmentation designer is usable, but shows its user-interface ...
Read more >
Fixing Google Chrome compatibility bugs in websites - FAQ
HTML & CSS can't do pixel perfect layout. So font and element sizes can change slightly between browser versions and OSs. If a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found