title: CSS background-image transition makes video tag buffer
body: <p>I have a video tag that I want to play continuously while a user can simultaneously do stuff on the site. However I have found that if the background transitions between background images that the video starts buffering. I have a runnable example in the snippet below.</p>
  
  <p><strong>Note:</strong> The buffering does not seem to occur if the snippet is run normally, but does occur if you put the snippet in 'full page'. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function changeBackground() {
    const randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);
    const element = document.getElementById('background');
    const currentOpacity = element.style.opacity;
    const currentBackground = element.style.backgroundImage;
    
    switch (currentBackground) {
      case 'url("https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png")': {
        element.style.backgroundImage = 'url("https://i5.walmartimages.ca/images/Large/428/5_r/6000195494285_R.jpg")';
        break;
      }
      case 'url("https://i5.walmartimages.ca/images/Large/428/5_r/6000195494285_R.jpg")': {
        element.style.backgroundImage = 'url("https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png")';
        break;
      }
      default: {
        break;
      }
    }
  }
   
   const element = document.getElementById('background');
   element.style.backgroundImage = 'url("https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png")'</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#background {
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -10;
    
    background-size: contain;
    
    transition: background-image 3s ease-in-out;
  }
  
  #button {
    display: flex;
    width: 200px;
    height: 100px;
    background-color: orange;
    text-align: center;
  }
  
  #video {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    height: 350px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id='root' style='width: 100%; height: 500px'&gt;
      &lt;div id='background'&gt;&lt;/div&gt;
      &lt;div id='button' onClick="changeBackground()"&gt;Click me to change the background!&lt;/div&gt;
      &lt;video
        id='video'
        autoplay
        muted
        loop
        controls
        src="https://s3.amazonaws.com/codecademy-content/courses/React/react_video-cute.mp4"/&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What could be the cause and is there a way to prevent the video from buffering while still having a background image transition?</p>
  
  <p>Edit: May be important to add that I'm on Chrome on MacOS.</p>
  
  <p>Edit 2: From the responses I have gathered not everyone can reproduce the problem, so I went to an old-timey windows PC and tried it there. Found out that the background-transition was being really slow and laggy but the video kept playing without problem. It also works on safari on MacOS so this appears to be a <strong>Chrome MacOS-only</strong> problem.</p>