Bug 240871 - REGRESSION (r252945): accelerated animations prevent videos from taking up entire screen in fullscreen mode
Summary: REGRESSION (r252945): accelerated animations prevent videos from taking up en...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Animations (show other bugs)
Version: Safari 15
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-05-24 07:29 PDT by Liam DeBeasi
Modified: 2022-05-24 10:30 PDT (History)
6 users (show)

See Also:


Attachments
Code reproduction (962 bytes, text/html)
2022-05-24 07:29 PDT, Liam DeBeasi
no flags Details
CSS only reproduction (868 bytes, text/html)
2022-05-24 09:59 PDT, Liam DeBeasi
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Liam DeBeasi 2022-05-24 07:29:09 PDT
Created attachment 459722 [details]
Code reproduction

Running an accelerated animation on an element prevents the containing <video> element from taking up the entire screen when in fullscreen mode.

Steps to reproduce:

1. Open attached code reproduction in Safari for macOS.
2. Click the fullscreen button on the video. Observe that the video goes fullscreen and takes up the entire screen.
3. Exit fullscreen.
4. Click "Add Animation"
5. Click the fullscreen button on the video. Observe that the video goes fullscreen but does not take up the entire screen.

Expected Behavior:

I expect that the video takes up the entire screen when in fullscreen mode.

Actual Behavior:

The video does not take up the entire screen when in fullscreen mode.

Other Information:

- I reproduced this on both Safari 15.5 and STP 145.
- This issue does not reproduce on Chrome or Firefox.
Comment 1 Antoine Quint 2022-05-24 07:45:16 PDT
Thanks for filing this Liam. Do you have any indication that this behavior could have regressed?
Comment 2 Radar WebKit Bug Importer 2022-05-24 07:45:26 PDT
<rdar://problem/93831877>
Comment 3 Liam DeBeasi 2022-05-24 09:09:19 PDT
Thanks for taking a look.

This does appear to have regressed. Safari 12.1 does not reproduce the issue, but Safari 13.1+ does.
Comment 4 Jer Noble 2022-05-24 09:40:25 PDT
The current fullscreen implementation works by forcibly removing/overriding all styles that create a stacking context between the root and the fullscreen element. In this case, the animation is creating a stacking context that limits the width and height of the video element in fullscreen to the size of the .wrapper div.
Comment 5 Antoine Quint 2022-05-24 09:47:47 PDT
(In reply to Liam DeBeasi from comment #3)
> Thanks for taking a look.
> 
> This does appear to have regressed. Safari 12.1 does not reproduce the
> issue, but Safari 13.1+ does.

Are you sure that it wasn't the case that the repro you create uses the Web Animations API which wasn't available in Safari 12.1 and thus no animation is added?
Comment 6 Liam DeBeasi 2022-05-24 09:59:49 PDT
Created attachment 459727 [details]
CSS only reproduction

Ah, good point!

I attached a reproduction that only uses CSS Animations. However, I get the same results as before: Safari 12.1 does not reproduce the issue, but Safari 13.1+ does.
Comment 7 Antoine Quint 2022-05-24 10:30:50 PDT
This regressed when we enabled Web Animations for CSS-originated animations in r252945.