Scroll position is reset when rubber banding

• Component: Scrolling
• Status: RESOLVED DUPLICATE

[Liam DeBeasi]

Created attachment 395378 [details]
Bug reproduction example

Rubber band/overflow scrolling on a non-body element gets reset when changing another element's transform or opacity. This does not happen when changing something else such as the element's background-color.

Steps to reproduce:

1. Open the attached reproduction file on an iOS device.
2. Tap and hold one of the cards that says "Hello World". The card that was tapped should scale down slightly.
3. While holding down on the card, scroll up a bit, then scroll down to perform the rubber band effect at the top.
4. While the rubber band effect is active, remove your pointer from the screen.
5. You should see the scroll position abruptly reset to 0 rather than ease back.
6. Tap "Alter opacity when active" and repeat steps 2-5.
7. Tap "Alter background when active" and repeat steps 2-4. You should see the scroll position ease back to 0 rather than abruptly jump back.

Expected Behavior:

When changing transform or opacity, I would expect the scroll position to ease back to 0 rather than abruptly jump back.


Tested on an iPhone 11 running iOS 13.4, but this issue appears on earlier versions of iOS 13.

I have run into this issue several times in the past. This has resulted in a few less than ideal workarounds such as https://github.com/ionic-team/ionic/blob/master/core/src/components/header/header.ios.scss#L81-L90.

Unfortunately, this issue has started to affect some of our users who are building applications with our components that transform or change opacity when active. The current workaround is to change something other than transform or opacity, but it would be great if this issue could get addressed.

[Radar WebKit Bug Importer]

<rdar://problem/61301438>

[Lincoln Baxter, III]

Definitely happening a lot in our applications. We have not found a suitable workaround yet (and ultimately ended up here.)

Tried various forms of intercepting scroll events, touch events, etc. But ultimately Safari wins out and the bounce jitters very noticeably.

Virtual-scrolling components (e.g. long lists rendering partial info/re-using components and translating them as they move out of their parent container's scroll viewport) suffer from this particularly due to the fact that they need to be transformed to keep them "in-place"

[Simon Fraser (smfr)]

I can reproduce.

[Berke Aras]

Any updates to this issue? The UX is of our apps is really bad now :(

[Simon Fraser (smfr)]

Have you tested iOS 14?

[Berke Aras]

Yes, I've tested on iOS 14 (I tried all versions).

[Simon Fraser (smfr)]

This was fixed in https://trac.webkit.org/changeset/267002/webkit

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