(1) Go to http://scroll-driven-animations.style/ (2) Hover one of the images of the visual down the page. The visuals are video elements with a poster image. The videos are paused on load. Upon `pointerenter` the, a `.play()` is triggered. Upon `pointerleave`, a `.pause()` is triggered. What happens: When swapping out the poster for the video, the video shows a grey background while the video file is still loading. This is very much visible when on a slow connection. What I expected to happen (and what other browsers do): keep showing the poster image until there is enough data to start rendering the video source, as this glitch of grey is a visual disturbance.
I am able to reproduce this bug on Safari 16.5.1 and Safari Technology Preview 174 as well, where upon hover on some images (almost all but some are instant), I get 'green' flash before video continuing.
NOTE - the flash is less bad on WebKit ToT (266205@main).
<rdar://problem/113003051>
@Bramus - was the site updated because now I am unable to use it to reproduce this bug? Do you have broken case test site?
@Ahmad Nothing changed. Flash is still there, I just checked. Could be the videos are now cached on your end, or that your connection is Super Fast™. Try setting throttling in DevTools (you need to enable an experimental setting first, before you can do so) or use the Network Link Conditioner to fake a slow connection.
(In reply to Bramus from comment #5) > @Ahmad Nothing changed. Flash is still there, I just checked. Could be the > videos are now cached on your end, or that your connection is Super Fast™. > > Try setting throttling in DevTools (you need to enable an experimental > setting first, before you can do so) or use the Network Link Conditioner to > fake a slow connection. Cool! I think my network being fast came into picture. Let me try again with experimental flag on WebKit ToT.