Bug 259376

Summary:	Flash of grey background in between showing video poster and playing the actual video
Product:	WebKit	Reporter:	Bramus <bramus>
Component:	Layout and Rendering	Assignee:	Nobody <webkit-unassigned>
Status:	NEW ---
Severity:	Normal	CC:	ahmad.saleem792, bfulgham, eric.carlson, jer.noble, simon.fraser, webkit-bug-importer, zalan
Priority:	P2	Keywords:	InRadar
Version:	WebKit Nightly Build
Hardware:	Mac (Apple Silicon)
OS:	macOS 13

Description Bramus 2023-07-20 16:28:17 PDT

(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.

Comment 1 Ahmad Saleem 2023-07-21 11:26:18 PDT

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.

Comment 2 Ahmad Saleem 2023-07-21 11:27:12 PDT

NOTE - the flash is less bad on WebKit ToT (266205@main).

Comment 3 Radar WebKit Bug Importer 2023-07-27 16:29:19 PDT

<rdar://problem/113003051>

Comment 4 Ahmad Saleem 2023-07-28 00:09:43 PDT

@Bramus - was the site updated because now I am unable to use it to reproduce this bug?

Do you have broken case test site?

Comment 5 Bramus 2023-07-28 02:22:54 PDT

@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.

Comment 6 Ahmad Saleem 2023-07-28 02:24:38 PDT

(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.