Bug 218481 – REGRESSION: Wrong overflow behavior in iOS 13+

• Status: NEW
• Component: Scrolling

[David Gurk]

Created attachment 413012 [details]
Example build to reproduce including screenshots and screen capture

Setup:
* iPhone 11 with iOS 14.1
* the content of ios-bug.tar

Steps to reproduce:
1. extract ios-bug.tar and step into the directory
2. npm install
3. npm run run
4. open local page with iPhone

The packed state of the files shows the bug.

What should happen:
When swiping the slider forward, all slides from the third should properly shown.

What actually happen:
When swiping forward, all slides from the third are not visible and clipped (?) from the overflow.

How to workaround this:
a) Go to index.css line 65 and comment out overflow-x: auto;
b) Go to index.html line 33 and switch test-async.js with test.js

Background:
The overflow-x: auto; is the fallback, if JavaScript isn't initialized. The Swiper initialization is a progressive enhancement and removes the overflow fallback with adding the class .swiper-container-initialized to the .swiper-container.

Sadly workaround a) removes the fallback behavior and I didn't find a good replacement. Workaround b) is no solution.

The weird:
It's really weird that switching to async JavaScript (very common case) introduces this issue.

Notes:
* The issue appears first with the release of iOS 13. 
* iOS 12 is not affected
* I saw the with iOS 13 a new scrolling behavior was introduced, which is more similar to Android.

[Radar WebKit Bug Importer]

<rdar://problem/71010597>