Bug 285247 – Carousel scroll is abruptly canceled when window is scrolled and animation is played on element with negative z-index

• Component: Animations
• Status: NEW

[Nick Coury]

Video of broken experience - https://photos.app.goo.gl/jg9B7oDkBbYcXYnQA
Video of expected experience - https://photos.app.goo.gl/MeP8rEFxK7cs6zJz7


We are building a swipe to grow carousel as seen in the expected experience video above. A user can scroll a carousel, and it will animate to reveal additional content as they engage. I'm seeing a bug where the user's gesture is interrupted and the carousel stops scrolling abruptly which is quite jarring and janky. As far as I can tell, these are the minimum factors involved:
- The user scrolls the carousel
- window.scrollBy() is called to adjust the viewport after expanding the content so it is visually in the correct place
- Playing an animation on an element with negative z-index (separate from the carousel)

If I set a 0 or positive z-index on the animated element, the bug doesn't occur.

JSBin - https://jsbin.com/qizalop/17/edit?html,console,output
Reproduction link for device testing with `z-index: -1` - https://output.jsbin.com/qizalop/17/quiet
Working link for device testing with `z-index: 0` - https://output.jsbin.com/qizalop/16/quiet

Reproduction:
1. Load the reproduction link on a physical iPhone (not the simulator or Desktop Safari in responsive mode).
2. Scroll the carousel.
3. Observe the carousel stops scrolling even when touching/swiping hasn't ended. The upward animation correctly plays.
4. Load the working link.
5. Scroll the carousel.
6. Observe the carousel continues to scroll during the upward animation, as expected.
7. Load the same links in Chrome and observe it works in both cases.

Reproduced on several iPhones ranging from iOS 15 to 18 using BrowserStack. Does not reproduce on the simulator or desktop Safari.

[Nick Coury]

jsbin seems to be having issues, created the reproduction again:

Live link - https://flowery-tin-pepper.glitch.me
Code- https://glitch.com/edit/#!/flowery-tin-pepper

Added a toggle to change the z-index on one of the elements between -1 and 1, the reproduction now works by toggling it on page load to one of the values, then swiping the carousel to see it work or not work. Refresh the page to reset.

[Radar WebKit Bug Importer]

<rdar://problem/142437523>

[Antoine Quint]

Hi Nick. It's not obvious to me what I'm supposed to be doing on https://flowery-tin-pepper.glitch.me to reproduce the issue. Could you elaborate? I don't see a carousel to swipe.

[Nick Coury]

See the videos in the original post for the expected behavior and actual behavior. The carousel is the set of Lorem Ipsum tiles. The reproduction is to swipe that carousel to the left, which causes that carousel to grow. On non-mobile WebKit, it smoothly grows and the carousel can be further scrolled without stopping input. On mobile WebKit, the animation stops scrolling and the touch must be ended and then restarted to continue scrolling the carousel. It needs to be viewed on a physical iPhone with mobile viewport to reproduce from what I can tell, I wasn't able to reproduce on responsive mode of desktop Safari.

[Antoine Quint]

Thanks Nick, this is clear now.

[Antoine Quint]

I am not seeing this behavior with iOS 18.3.

[Antoine Quint]

Nor am I seeing it With iOS 18.0. I see the same behavior whether z-index is -1 or 1.

[Antoine Quint]

I should point out that in both cases I see the behavior as shown in "Video of broken experience" shown above, but no difference either way.

[Antoine Quint]

Created attachment 474144 [details]
Screen Recording

Here's what I'm seeing in both cases.

[Nick Coury]

Your video does show the broken experience as the carousel stops scrolling while you're still swiping. But you're seeing it for z-index 1 as well?

If the carousel abruptly stops scrolling with z-index 1 that's not what I'm seeing when testing right now on an iPhone 12 Mini on iOS 18.3. You'll need to refresh the page and change the z-index immediately each time to reset the animation to reproduce properly. I would also recommend swiping right to left instead of left to right to more easily scroll the carousel instead of overscrolling it.

[Antoine Quint]

OK, now I understand and see the issue which reproduces in both iOS 18.0 and iOS 18.3 as described.

[Antoine Quint]

Nick, I see you're writing from a @google.com email address. Does this bug affect a Google property?

[Nick Coury]

Yes, it prevented us from launching a feature on iOS while we launched it on other platforms. Once we identified the root cause we were able to change our code to avoid this bug, but because it was subtle it took several engineers trying several times over a 6 month period to narrow down the set of factors that was causing it.