React-window: unexpected behavior on iOS safari in RTL direction

[mjseyyedi]

Hello.
I am using your great library to show my horizontal lists in RTL mode. it's about OK in android and chrome , just a little buggy. but it's totally weird in safari.
You can see the behavior below:

<InfiniteLoader isItemLoaded={index => { return this.isLoading || index < this.props.totalCount; }} itemCount={this.props.totalCount} threshold={1} loadMoreItems={(start, end) => console.log('$$$$$$$$$$$$$$$$$$$$$$$$', start , end)}> {({ onItemsRendered, ref }) => ( <List className="List" direction="rtl" height={itemHeight} layout="horizontal" itemCount={this.props.vendors ? this.props.vendors.length : 0} itemSize={itemWidth} onItemsRendered={onItemsRendered} ref={ref} width={window.innerWidth}> {this.itemRenderer} </List> )} </InfiniteLoader>

itemRenderer = (props) => { return <HomeVendorItem {...this.props.vendors[props.index]} style={props.style} isSuperMarket={this.props.isSuperMarket} sendAmplitudeEvent={this.props.sendAmplitudeEvent}/>; };

[bvaughn]

I would be willing to review PRs that improve the RTL support for Safari, but I probably won't be working on it myself. I'm not an iOS user and I don't have a use case for RTL in react-window, so I won't be able to make time for it. If you'd be interested in contributing, this would be a good opportunity.

As for the code snippet- a big blob of unformatted code doesn't really count as a repro case 😄 I think something that's runnable on Code Sandbox is kind of the gold standard. If not that, then a Git repo that can be cloned and run easily.

What I'm seeing (from the Gif you've attached) doesn't look obviously RTL-related to me, although I'll trust that it is 😄 it's just difficult to rule out other potential causes when you only have a small section of the app's code+styles.

[mjseyyedi]

it's totally OK in LTR version.

[bvaughn]

@mjseyyedi

Do you see similar issues on the demo page?
https://react-window.now.sh/#/examples/list/fixed-size-rtl

[shayc]

@bvaughn I couldn't reproduce on iPhone XS iOS 12.4 with this link:
https://react-window.now.sh/#/examples/list/fixed-size-rtl

[ahmedelgabri]

Same here, can't reproduce on Safari iOS 12.4 on iPhone 6. The demo works fine.

[bvaughn]

Thanks folks for the added info!

Seems like there's something about the application code then. It's hard to do more with this, given that we can't see the code or the even the app that's showing this problem. cc @mjseyyedi