WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
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
Add attachment
proposed patch, testcase, etc.
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
<
rdar://problem/74087917
>
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.
Top of Page
Format For Printing
XML
Clone This Bug