Background video glitch on mobile safari and chrome

Question

I've got an issue whereby the background video causes the rest of the website to flicker/flash when viewed on iPhone versions of Safari or Chrome. It works as expected on full size browsers.

If I remove the video element or add display:none to said element, the site stops flickering.

Here's a working version of the issue: (deleted).

I've added a sample video and removed any irrelevant info from this incomplete development example site.

Any helps would be appreciated.

Thanks

Answer 1

I have a slick slider with video-slides and text with overlay over the video. In my case, I added the "z-index: -1" to the video tag and everything started to work normally. All other elements don't have z-indexes.

Answer 2

I also encountered a similar issue but the earlier answers didn't work for me. I had a video tag absolute positioned as background (z-index: -98) and some elements positioned on top (z-index ranging from -4 to 0). The elements on top flickered as soon as the video tag changed (source or CSS).

Changing the top elements z-index to positive numbers somehow solved the issue.

Answer 3

I had a similar problem today (owner of iPhone 7, IOS14). Annoying flickering seen in both Safari and Chrome browsers. I have an absolute positioned video as background and some elements "on top". These elements flicker. The other guys answer using -webkit-transform: translate3d(0,0,0); did not work for me.

Adding -webkit-perspective: 1000; on video element did solve my issue.

Answer 4

Hopefully this will be helpful to anyone else who has this issue.

The issue appeared to be with how safari renders offscreen elements. Adding -webkit-transform: translate3d(0,0,0); to any problematic element, fixed the issue.