[Webkit-unassigned] [Bug 205472] New: [Web Animations] Changing display before running animation causes animation to not show up until last frame

[bugzilla-daemon at webkit.org]

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

            Bug ID: 205472
           Summary: [Web Animations] Changing display before running
                    animation causes animation to not show up until last
                    frame
           Product: WebKit
           Version: Safari 13
          Hardware: Unspecified
                OS: Unspecified
            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 an element that was previously hidden is shown and animated, Safari does not apply the new `display` value before running the Web Animation. This causes the animation to only show the final frame of the animation once the animation is done.

Steps to reproduce:

1. Open https://codepen.io/liamdebeasi/pen/NWPpreq in the latest Safari Tech Preview (97 at the time of writing).
2. Click "Play with Web Animations". You should notice that the "Hello World" text remains hidden for about 2 seconds and then is visible.
3. Click "Play with CSS Animations". You should notice that the "Hello World" text fades and scales in over a 2 second period.
4. Click "Play with Web Animations and RAF". You should notice that the "Hello World" text fades and scales in over a 2 second period.

In this example, I have a div that has `display: none` applied. Before each type of animation is run, the div has `display: inline-block` set on it. After that, we run either the CSS or Web Animation. The "Play with Web Animations and RAF" option wraps the `text.animate` code in a requestAnimationFrame, allowing the browser to render the new `display` value before running the animation. 

Expected Result: I would expect that Safari would apply the updated `display` value before running the Web Animation. Both Chrome and Firefox properly apply the new `display: inline-block` value before running the Web Animation.
Temporary Workaround: You can wrap the `text.animate` code in a requestAnimationFrame, but that's not an ideal solution as it may cause flickering when doing more complex types of animations.

Given that using an raf can be used as a workaround, it might be the case that this is more of a race condition than Safari just not applying the new `display` value, but I'm not 100% certain.

-- 
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/20191219/02848505/attachment.htm>