RESOLVED DUPLICATE of bug 84796 Bug 221471
CSS transform @keyframes animation breaks full screen video
https://bugs.webkit.org/show_bug.cgi?id=221471
Summary CSS transform @keyframes animation breaks full screen video
Andrew Hawkes
Reported 2021-02-05 09:13:15 PST
When a basic CSS @keyframes animation using transforms is applied to the parent element of <video> or <iframe>, the fullscreen behaviour is broken in Safri on macOS. I've tested this on 14.0.2. I have set up an example here https://codepen.io/andrewhawkes/pen/ExNPrjj The example uses an iframe but the same is true for a video element.
Attachments
Antoine Quint
Comment 1 2021-02-05 11:23:23 PST
Do you know if this affects prior versions of Safari, such as Safari 13?
Andrew Hawkes
Comment 2 2021-02-05 11:40:30 PST
(In reply to Antoine Quint from comment #1) > Do you know if this affects prior versions of Safari, such as Safari 13? I don't I'm afraid. I've tested the latest Safari on iOS though and the issue isn't present. But I suspect the fullscreen functionality isn't the same.
Antoine Quint
Comment 3 2021-02-08 00:59:50 PST
I can reproduce this going as far back as r236648 (October 2018) so I think this isn't new to Safari 14, or even Safari 13, and would venture this has always been an issue.
Radar WebKit Bug Importer
Comment 4 2021-02-08 01:00:17 PST
Antoine Quint
Comment 5 2021-02-08 01:07:27 PST
Changing the animation to use "margin-left" (not accelerated) or "opacity" (accelerated) does not reproduce the issue. Removing the animation and setting "will-change: transform" or setting "transform: translateZ(0)" does not reproduce the issue. So it does seem specific to animations of transform.
Andrew Hawkes
Comment 6 2021-02-08 01:44:09 PST
(In reply to Antoine Quint from comment #5) > Changing the animation to use "margin-left" (not accelerated) or "opacity" > (accelerated) does not reproduce the issue. Removing the animation and > setting "will-change: transform" or setting "transform: translateZ(0)" does > not reproduce the issue. So it does seem specific to animations of transform. When I was debugging the original issue I was having I did find removing "will-change: opacity" fixed one instance of this but I couldn't replicate it. I'm not super clued up on how it works but I assume it's happening under GPU acceleration. I thought I'd note that anyway, just in case. If I get some time, I'll try to replicate it.
Jer Noble
Comment 7 2021-02-09 09:52:27 PST
The underlying issue is that WebKit does not yet support the 'top layer' behavior specified by https://fullscreen.spec.whatwg.org/#top-layer, so a stray stacking context can override the UA stylesheet which makes the fullscreen element occupy the entire window. In this case, it appears that the 'animate-in' rule is doing so.
Antoine Quint
Comment 8 2021-02-09 09:56:21 PST
I think we can mark this as a duplicate of bug 84796 then. *** This bug has been marked as a duplicate of bug 84796 ***
Andrew Hawkes
Comment 9 2021-02-09 11:57:39 PST
(In reply to Antoine Quint from comment #8) > I think we can mark this as a duplicate of bug 84796 then. > > *** This bug has been marked as a duplicate of bug 84796 *** Is this likely not going to be resolved? I see the referenced bug is from 2012?
Antoine Quint
Comment 10 2021-02-09 12:41:39 PST
Andrew, we cannot comment on timing of future feature or bug fixes, at least for Apple platforms. However, let me say that we are aware of the limitation and its impact on other Web platform features, such as <dialog>.
Andrew Hawkes
Comment 11 2021-02-09 13:24:33 PST
(In reply to Antoine Quint from comment #10) > Andrew, we cannot comment on timing of future feature or bug fixes, at least > for Apple platforms. However, let me say that we are aware of the limitation > and its impact on other Web platform features, such as <dialog>. Okay, thanks for getting back to me. I'll keep an eye on the other bug.
Antoine Quint
Comment 12 2021-02-10 04:26:08 PST
Andrew, if you're interested in a workaround, you can try this: :-webkit-full-screen-ancestor { animation: none; } This will disable the animation when your element enters fullscreen.
Andrew Hawkes
Comment 13 2021-03-02 07:45:18 PST
(In reply to Antoine Quint from comment #12) > Andrew, if you're interested in a workaround, you can try this: > > :-webkit-full-screen-ancestor { > animation: none; > } > > This will disable the animation when your element enters fullscreen. Thank you, this does appear to work as a temp fix.
Note You need to log in before you can comment on or make changes to this bug.