209968 2020-04-03 08:33:23 -0700 Scroll position is reset when rubber banding 2020-10-06 16:59:07 -0700 1 1 1 Unclassified WebKit Scrolling Safari 13 iPhone / iPad iOS 13 RESOLVED DUPLICATE 216463 InRadar P2 Normal --- 1 ldebeasi webkit-unassigned horodyski info lincolnbaxter oa simon.fraser webkit-bug-importer oldest_to_newest 1637365 0 395378 ldebeasi 2020-04-03 08:33:23 -0700 Created attachment 395378 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. 1637730 1 webkit-bug-importer 2020-04-04 13:04:10 -0700 <rdar://problem/61301438> 1663625 2 lincolnbaxter 2020-06-17 11:44:20 -0700 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" 1663729 3 simon.fraser 2020-06-17 17:53:47 -0700 I can reproduce. 1694500 4 info 2020-10-04 01:21:44 -0700 Any updates to this issue? The UX is of our apps is really bad now :( 1694623 5 simon.fraser 2020-10-04 20:35:27 -0700 Have you tested iOS 14? 1694689 6 info 2020-10-05 08:27:26 -0700 Yes, I've tested on iOS 14 (I tried all versions). 1695392 7 simon.fraser 2020-10-06 16:59:07 -0700 This was fixed in https://trac.webkit.org/changeset/267002/webkit *** This bug has been marked as a duplicate of bug 216463 *** 395378 2020-04-03 08:33:23 -0700 2020-04-03 08:33:23 -0700 Bug reproduction example index.html text/html 2178 ldebeasi PGh0bWw+CiAgPGhlYWQ+CiAgICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9 ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTEiPgogICAgPHN0eWxlPgogICAgICBib2R5IHsK ICAgICAgICB1c2VyLXNlbGVjdDogbm9uZTsKICAgICAgICAtd2Via2l0LXVzZXItc2VsZWN0OiBu b25lOwogICAgICB9CiAgICAgIAogICAgICAuc2Nyb2xsYWJsZS1jb250YWluZXIgewogICAgICAg IG92ZXJmbG93LXk6IGF1dG87CiAgICAgICAgCiAgICAgICAgYmFja2dyb3VuZDogI2VlZTsKICAg ICAgICAKICAgICAgICBib3JkZXI6IDFweCBzb2xpZCAjYWFhOwogICAgICAgIAogICAgICAgIHdp ZHRoOiAzMjBweDsKICAgICAgICBoZWlnaHQ6IDUwMHB4OwogICAgICB9CiAgICAgIAogICAgICAu Y2FyZCB7CiAgICAgICAgcGFkZGluZzogMTBweDsKICAgICAgICBtYXJnaW46IDEwcHg7CiAgICAg IAogICAgICAgIHdpZHRoOiBjYWxjKDEwMCUgLSA0MHB4KTsKICAgICAgICBoZWlnaHQ6IDIwMHB4 OwogICAgICAgIAogICAgICAgIGJhY2tncm91bmQ6IHdoaXRlOwogICAgICAgIGJveC1zaGFkb3c6 IDBweCAxcHggNHB4IHJnYmEoMCwgMCwgMCwgMC4yKTsKICAgICAgICAKICAgICAgICBib3JkZXIt cmFkaXVzOiA2cHg7CiAgICAgICAgCiAgICAgICAgd2lsbC1jaGFuZ2U6IHRyYW5zZm9ybTsKICAg ICAgfQogICAgICAKICAgICAgLmNhcmQuYWN0aXZlLWJhY2tncm91bmQgewogICAgICAgIGJhY2tn cm91bmQ6IHJlZDsKICAgICAgfQogICAgICAKICAgICAgLmNhcmQuYWN0aXZlLXRyYW5zZm9ybSB7 CiAgICAgICAgdHJhbnNmb3JtOiBzY2FsZSgwLjk1KTsKICAgICAgfQogICAgICAKICAgICAgLmNh cmQuYWN0aXZlLW9wYWNpdHkgewogICAgICAgIG9wYWNpdHk6IDAuNTsKICAgICAgfQogICAgPC9z dHlsZT4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZGl2IGNsYXNzPSJzY3JvbGxhYmxlLWNvbnRh aW5lciI+CiAgICAgIDxkaXYgY2xhc3M9ImNhcmQiPkhlbGxvIFdvcmxkPC9kaXY+CiAgICAgIDxk aXYgY2xhc3M9ImNhcmQiPkhlbGxvIFdvcmxkPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9ImNhcmQi PkhlbGxvIFdvcmxkPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9ImNhcmQiPkhlbGxvIFdvcmxkPC9k aXY+CiAgICAgIDxkaXYgY2xhc3M9ImNhcmQiPkhlbGxvIFdvcmxkPC9kaXY+CiAgICAgIDxkaXYg Y2xhc3M9ImNhcmQiPkhlbGxvIFdvcmxkPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9ImNhcmQiPkhl bGxvIFdvcmxkPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9ImNhcmQiPkhlbGxvIFdvcmxkPC9kaXY+ CiAgICAgIDxkaXYgY2xhc3M9ImNhcmQiPkhlbGxvIFdvcmxkPC9kaXY+CiAgICAgIDxkaXYgY2xh c3M9ImNhcmQiPkhlbGxvIFdvcmxkPC9kaXY+CiAgICA8L2Rpdj4KICAgIAogICAgPGJ1dHRvbiBv bmNsaWNrPSJzZXRBY3RpdmUoJ2JhY2tncm91bmQnKSI+QWx0ZXIgYmFja2dyb3VuZCB3aGVuIGFj dGl2ZTwvYnV0dG9uPgogICAgCiAgICA8YnV0dG9uIG9uY2xpY2s9InNldEFjdGl2ZSgnb3BhY2l0 eScpIj5BbHRlciBvcGFjaXR5IHdoZW4gYWN0aXZlPC9idXR0b24+CiAgICAKICAgIDxidXR0b24g b25jbGljaz0ic2V0QWN0aXZlKCd0cmFuc2Zvcm0nKSI+QWx0ZXIgdHJhbnNmb3JtIHdoZW4gYWN0 aXZlPC9idXR0b24+CiAgICAgIAogICAgPHNjcmlwdD4KICAgICAgY29uc3QgY2FyZHMgPSBkb2N1 bWVudC5xdWVyeVNlbGVjdG9yQWxsKCcuY2FyZCcpOwogICAgICBsZXQgYWN0aXZlQ2xhc3MgPSAn dHJhbnNmb3JtJzsKICAgICAgY2FyZHMuZm9yRWFjaChjYXJkID0+IHsKICAgICAgICBjYXJkLmFk ZEV2ZW50TGlzdGVuZXIoJ3RvdWNoc3RhcnQnLCAoKSA9PiB7CiAgICAgICAgICBjYXJkLmNsYXNz TGlzdC5hZGQoYGFjdGl2ZS0ke2FjdGl2ZUNsYXNzfWApOwogICAgICAgIH0pOwogICAgICAgIAog ICAgICAgIGNhcmQuYWRkRXZlbnRMaXN0ZW5lcigndG91Y2hlbmQnLCAoKSA9PiB7CiAgICAgICAg ICBjYXJkLmNsYXNzTGlzdC5yZW1vdmUoYGFjdGl2ZS0ke2FjdGl2ZUNsYXNzfWApOwogICAgICAg IH0pOwogICAgICB9KTsKICAgICAgCiAgICAgIGNvbnN0IHNldEFjdGl2ZSA9ICh0eXBlKSA9PiB7 CiAgICAgICAgYWN0aXZlQ2xhc3MgPSB0eXBlOwogICAgICB9OwogICAgPC9zY3JpcHQ+CiAgPC9i b2R5Pgo8L2h0bWw+