Bug 201048 - [Animations][Shadow DOM] Animations freeze on elements in shadow root when layout is invalidated
Summary: [Animations][Shadow DOM] Animations freeze on elements in shadow root when la...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Animations (show other bugs)
Version: Safari 12
Hardware: All All
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Blocks: 148695
  Show dependency treegraph
Reported: 2019-08-22 12:47 PDT by Liam DeBeasi
Modified: 2019-11-15 06:32 PST (History)
8 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Liam DeBeasi 2019-08-22 12:47:00 PDT
When animating an element within a shadow root in a custom element, layout invalidations via `Node.insertBefore` cause the animation to freeze. This does not happen when using a custom element without a shadow root. I am able to reproduce this in Safari 12 on both iOS and macOS.

Code reproduction: https://codepen.io/liamdebeasi/pen/YzKNGzW

Steps to reproduce:
1. Go to the link above.
2. You should see a box that is rotating, as well as a button.
3. Click the "Click Me" button.
4. Notice that the box stops rotating.
5. Subsequent clicks of the "Click Me" button will cause the animation to render for a frame and then stop again.

Hovering over the ".square" element in Web Inspector will reveal that the animation is still playing. The "highlight" that appears over the element in the DOM tree should update every time you hover over it. Switching to another tab and then back to the original tab somehow fixes the issue.

This bug does not happen when using a custom element without a shadow root, as seen in this code example: https://codepen.io/liamdebeasi/pen/xxKgErw (follow the same steps as before)

As an additional reference, Angular can sometimes call `Node.insertBefore` when running change detection. This can cause animations in a user's application to break when using the shadow DOM. See https://github.com/ionic-team/ionic/issues/17202 for more info)

Web Animations API Note:

The same bug affects Safari's implementation of the Web Animations API (tested using Safari Technology Preview 90). With just "Web Animations" enabled in "Experiments", the tab switching trick mentioned above does not work. When also enabling "CSS Animations via Web Animations" the tab switching trick works.

Web Animations Code Reproduction: https://codepen.io/liamdebeasi/pen/LYPxbed
Comment 1 Radar WebKit Bug Importer 2019-08-22 13:47:37 PDT
Comment 2 Niklas Merz 2019-11-15 06:32:12 PST
I can add that this seems to be a regression. The same transitions work more smoothly on iOS 12.4 than on iOS 13.