CSS animation of pseudo element content causes flickering of nested video element
Categories
(Core :: Audio/Video: Playback, defect)
Tracking
()
People
(Reporter: contact, Unassigned)
Details
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:98.0) Gecko/20100101 Firefox/98.0
Steps to reproduce:
On OSX Firefox:
I have a video element with a poster attribute set, I deliberately set a bogus source child linking to a video that doesn't exist to test the poster.
The main element has a pseudo element which I am animating the content.
https://jsfiddle.net/dtcp2z1k/9/
Actual results:
While the animation is running:
- the video element will flicker
- the pseudo element is not selectable in the inspector
Expected results:
Video will display the poster without flickering. Pseudo element can be selected/viewed in the inspector while animation is ongoing.
|
||
Comment 1•3 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Audio/Video: Playback' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
||
Comment 2•3 years ago
|
||
Animating content is rather evil if you ask me :)
What's happening is that changing content causes us to rebuild that layout subtree. Ideally for this case it shouldn't need to rebuild the whole element (or even the pseudo-element for that matter). A workaround to avoid the flickering would be to put the ::after pseudo on a sibling rather than a container of the <video>.
Bug 1476281 tracks the extra work done above which is really the root cause of the issue.
Description
•