javascript - Safari 14 flickers video on display:none/display block toggle

Question

I have noticed that on Safari 14, there is a strange issue with the video tag. When a video is being streamed and the corresponding parent container set "display" to "none," it creates a small noticeable flicker with reproduce rate of 3/10 times.

On Chrome/Firefox/Edge, old versions of Safari, the flicker does not occur.

I also have noticed, when there is a complex DOM tree, it flickers more often.

Any suggestions of what might causing it and how I can fix it?

Here is an example Codepen

<div id="container">
 <video width="640" muted="true" height="360" controls="" autoplay="true" id="videoTag" loop="true">
    <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148422/Vienna-SD.mp4" type="video/mp4">
</video>
   <video width="640" muted="true" height="360" controls="" 
          loop="true" autoplay="true" id="videoTag">
    <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148422/Vienna-SD.mp4" type="video/mp4">
</video>
  
  <span>Foo string</span>
</div>

<button id="test">Hide me</button>
<button id="show"> Show me </button>

 <script>
 const videoTag = document.querySelector('#videoTag');
 const container = document.querySelector('#container');
 const button = document.querySelector('#test');
 const show = document.querySelector('#show');

 button.onclick = function(){
   container.style.display = 'none';
 };

 show.onclick = function(){
   container.style.display = 'block';
 };
 </script>

question from:https://stackoverflow.com/questions/65922251/safari-14-flickers-video-on-displaynone-display-block-toggle

Answer 1

Waitting for answers