glidejs
Safari only: full-screen video in carousel not rendering properly
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)
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.
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.
