Bug 221471
| Summary: | CSS transform @keyframes animation breaks full screen video | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Andrew Hawkes <mail> |
| Component: | Animations | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED DUPLICATE | ||
| Severity: | Normal | CC: | dino, eric.carlson, graouts, graouts, jer.noble, peng.liu6, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 14 | ||
| Hardware: | Mac (Intel) | ||
| OS: | macOS 11 | ||
| Bug Depends on: | 84796 | ||
| Bug Blocks: | |||
Andrew Hawkes
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 | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Antoine Quint
Do you know if this affects prior versions of Safari, such as Safari 13?
Andrew Hawkes
(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
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
<rdar://problem/74087917>
Antoine Quint
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
(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
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
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
(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
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
(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
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
(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.