Bug 209968 - Scroll position is reset when rubber banding
Summary: Scroll position is reset when rubber banding
Status: RESOLVED DUPLICATE of bug 216463
Alias: None
Product: WebKit
Classification: Unclassified
Component: Scrolling (show other bugs)
Version: Safari 13
Hardware: iPhone / iPad iOS 13
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2020-04-03 08:33 PDT by Liam DeBeasi
Modified: 2020-10-06 16:59 PDT (History)
6 users (show)

See Also:

Bug reproduction example (2.13 KB, text/html)
2020-04-03 08:33 PDT, Liam DeBeasi
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Liam DeBeasi 2020-04-03 08:33:23 PDT
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.
Comment 1 Radar WebKit Bug Importer 2020-04-04 13:04:10 PDT
Comment 2 Lincoln Baxter, III 2020-06-17 11:44:20 PDT
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"
Comment 3 Simon Fraser (smfr) 2020-06-17 17:53:47 PDT
I can reproduce.
Comment 4 Berke Aras 2020-10-04 01:21:44 PDT
Any updates to this issue? The UX is of our apps is really bad now :(
Comment 5 Simon Fraser (smfr) 2020-10-04 20:35:27 PDT
Have you tested iOS 14?
Comment 6 Berke Aras 2020-10-05 08:27:26 PDT
Yes, I've tested on iOS 14 (I tried all versions).
Comment 7 Simon Fraser (smfr) 2020-10-06 16:59:07 PDT
This was fixed in https://trac.webkit.org/changeset/267002/webkit

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