Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Safari only: full-screen video in carousel not rendering properly #616

Open
robmaurizi opened this issue May 27, 2022 · 2 comments · May be fixed by #617
Open

Safari only: full-screen video in carousel not rendering properly #616

robmaurizi opened this issue May 27, 2022 · 2 comments · May be fixed by #617

Comments

@robmaurizi
Copy link

Hey folks- We're running into an issue where if we have videos in a carousel (we use Brightcove and Youtube for video hosting), if the user clicks the full-screen icon while in Safari, the browser attempts to full-screen the whole page, and not the video. This only happens when the video is in a carousel. Here are 2 code pens illustrating the issue. Notice the difference between how the videos render at full-screen while in a carousel compared with the standalone videos.

Broken/carousel version: https://codepen.io/robmaurizi-the-vuer/full/rNJpPON
Working/standalone version: https://codepen.io/robmaurizi-the-vuer/full/yLvpwoM

This works fine in Chrome & Firefox

Confirmed not working properly in:
Safari Version 15.4 (15613.1.17.1.13, 15613) on MacOS 10.15.7 (19H1824)
Safari Version 15.5 (16613.2.7.1.9, 16613) on MacOS 11.6.6 (20G624)
@robmaurizi
Copy link
Author

It appears as though this is related to the use of
will-change: transform; on .glide__slides in the Glide CSS

Removing this or overriding it to will-change: auto seems to resolve the issue.

@robmaurizi robmaurizi linked a pull request Jun 7, 2022 that will close this issue
Open
@samsonbrody
Copy link

Just wanted to confirm I had a very similar bug using Vimeo instead of Youtube, and although I hadn't previously set will-change in my own CSS, by applying will-change:auto to .glide__slides in my code I was able to get rid of the previous issues. Thanks a ton @robmaurizi.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Remove will-change property robmaurizi/glide
2 participants
@robmaurizi @samsonbrody