Bug 201048

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