Created attachment 303001 [details] screencast showing problem The volume button is broken, you can see when it's hovered over that there are artifacts where the play and pause buttons appear over top of it improperly. See attached screencast. I first noticed this a month or two ago, I've just been slow to take the time to report it.
Created attachment 312913 [details] Not gstreamer, probably css animations I'm not sure why this is tagged gstreamer, it's either the CSS animation engine or the compositing layer creating these rendering artefacts from what I can tell. It doesn't seem like a cross-platform issue weirdly, but I'm unfamiliar with the above areas to dig very deep. Safari at least does not have this issue. Gstreamer doesn't render video controls. That's either done my the media elements, or in the case of YouTube, via custom JavaScript. I've attached another screencast showing a couple more things, 1) When muted, the artefacts don't appear 2) If you mess with the slider, it can change the artefact. 3) If you resize the window, you get a much worse artefact. The controls on youtube are made out of svg elements if that's a help. I think this should be reassigned to layout/rendering. YouTube isn't using the <video> elements controls attribute AFAICT, so it's not media elements to blame.
Forgot to mention, in the attached screencast, the gstreamer backend was modified to output black frames rather than actual video to show the artefacts more clearly, and to try and further demonstrate it's not the cause.
In fact, when you move the volume slider just past 50%, a transparent block appears just below the second "sound wave" arc that animates off the speaker. It's do with the animations that cause the sound wave arcs to appear by the looks of this. I do also now see some hooks from RenderVideo to the media player, but as of yet am unable to see how the media player can be causing artefacts like this through those callbacks.
Let's leave the [GStreamer] tag on the bug, to clarify that this issue does not affect Apple's ports.
CC'ing magomez and yoon for their experience with the compositor, if they can have a look when time permits.
Created attachment 314948 [details] Reduced test case showing more clearly what might be happening The problem is specific to an SVG being composited on a button, explaining the platform specific nature of this issue. If you take the SVG out of the button, it renders correctly. It seems to be how much of the SVG viewport is exposed after clipping (and hence how much of the button to let through). When there is some exposure, we get rendering artefacts, when there isn't it renders correctly. I hope this might narrow down where this could be happening to someone familiar with the renderer/compositor and how native GUI widgets are used in the browser. The attachment should help show the issue more clearly.
This bug is still appearing on Epiphany Technology Preview
Created attachment 371732 [details] [Screenshot] WinCairo port WinCairo port is having this issue.
Marking as duplicated of #198701, since it contains a patch that fixes this. *** This bug has been marked as a duplicate of bug 198701 ***