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.
Do you know if this affects prior versions of Safari, such as Safari 13?
(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.
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.
<rdar://problem/74087917>
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.
(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.
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.
I think we can mark this as a duplicate of bug 84796 then. *** This bug has been marked as a duplicate of bug 84796 ***
(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?
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>.
(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.
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.
(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.