[Webkit-unassigned] [Bug 201048] New: [Animations][Shadow DOM] Animations freeze on elements in shadow root when layout is invalidated

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Thu Aug 22 12:47:00 PDT 2019


https://bugs.webkit.org/show_bug.cgi?id=201048

            Bug ID: 201048
           Summary: [Animations][Shadow DOM] Animations freeze on elements
                    in shadow root when layout is invalidated
           Product: WebKit
           Version: Safari 12
          Hardware: All
                OS: All
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Animations
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: ldebeasi at gmail.com
                CC: dino at apple.com

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

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20190822/e5225582/attachment.html>


More information about the webkit-unassigned mailing list