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.
<rdar://problem/58103896>
Testing this again on Safari Tech Preview 100, and this issue appears to be resolved. Thank you!