Bug 203110 – Broken rendering for horizontally scrolled element started with Safari iOS 13.

• Component: Scrolling
• Status: RESOLVED DUPLICATE

[Flavio]

Created attachment 381199 [details]
Video of mobile Google Search for news related query triggering the bug on News Top Stories scrolling carousel.

Starting with the iOS 13 Safari release, we are seeing new rendering bugs on Safari 13 associated with the rendering of horizontal scrolling elements (like carousels on the Google Search page) usually triggered in combination of history state events.
In particular, in after history back event, we are seeing the following unexpected issues (see attached video):
- Carousel elements that were previously horizontally scrolled are scrolled back to initial position 0 after a back button event, whereas this was not the case on iOS 12 and it's not the case on Android.
- In certain cases they are rendered as blank. It seems like in these cases they are not scrolled back to initial position, but the carousels is an inconsistent state where actual position and rendering don't match, on tap the carousel is rendered again at its initial position.

We are trying to come up with a cleaner reproducible testcase.
Meanwhile, you can reproduce this on Google Search on mobile Safari on iOS 13 by:
- Search for a news related query e.g., [trump]
- See the "Top Stories" block of news results on the page which includes an horizontally scrollable carousel element.
- Scroll the carousel horizontally.
- Tap on any AMP link/result on the Search page (for example any of the links in the carousel or any link on the page with the "lightning bolt" icon). This triggers a soft history transition as opposed to a hard navigation making this bug easier to reproduce.
- Go back and notice the state of the horizontally scrolled carousel which is scrolled back to zero and in certain cases entirely blank as in the attached video.
- When the carousel is blank, a tap on the corresponding area will cause the carousel to reappear at position 0.

This occurs for different kinds of carousels we tested starting with iOS 13.
The scrolled back to position 0 issue occurs on iOS Chrome as well, however the blank rendering does only occur on Safari.

[Radar WebKit Bug Importer]

<rdar://problem/56383558>

[Flavio]

We created a testcase to better isolate this.
See repro steps in the inline comment.
https://jsbin.com/hivijalero/1/edit?html,output

In particular, we identified that the bug where the horizontal carousel is scrolled back to its initial position only occurs after the page is scrolled vertically. In addition, we verified this is unrelated to history events, but simply to hiding/showing the carousel: adding/removing "display: none" is enough to simulate the effect.

To reproduce:
1) Scroll the carousel horizontally.
2) Hide and re-show the carousel.
3) Scroll the page down vertically to see the flash + carousel snapping to initial position.

[Simon Fraser (smfr)]

I wonder if this is the same as bug 201528. Can you test in iOS 13.2 beta?

[Flavio]

Yes this seems fixed in 13.2, thank you!

[Simon Fraser (smfr)]

Thanks for tasing.

*** This bug has been marked as a duplicate of bug 201528 ***