title: Background is shaking in transition
body: <p>I have two div elements that the width can be controlled with click event on javascript. Whether on click event (toggling a className) or hover event, the background images of the its pseudo element seems to be shaking (confirmed on chrome, ie, edge, and safari). </p>
  
  <p>I have looked up on SO and google but it seems to be a problem with changing the size of the background itself, which is what I did not do here.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>section {
   width: 100%;
   max-width: 1920px;
   position: relative;
   min-height: 700px;
   overflow: hidden;
  }
  
  .container {
   width: 99%;
   height: 700px;
   position: absolute;
   transition: 1s linear width;
   overflow: hidden;
  }
  
  .left {
   top: 0;
   left: 0;
   background: transparent;
   transform: skew(20deg) translateX(-50%);
   border-radius: 0 20px 20px 0;
  }
  
  .left::after {
   content: "";
   position: absolute;
   top: 0;
   left: 50%;
   height: 100%;
   width: 100vw;
   transform: skew(-20deg);
   background-image: url(https://cdn.pixabay.com/photo/2018/12/04/22/38/road-3856796__340.jpg);
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
  }
  
  .right {
   top: 0;
   right: 0;
   border-radius: 20px 0 0 20px;
   transform: skew(20deg) translateX(50%);
  }
  
  .right::after {
   content: "";
   position: absolute;
   top: 0;
   right: 50%;
   height: 100%;
   width: 100vw;
   transform: skew(-20deg);
   background-image: url(https://media.istockphoto.com/photos/taking-a-walk-in-the-woods-picture-id1130258547?s=2048x2048);
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
  }
  
  .right:hover {
   width: 250%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section&gt;
    &lt;div class="container left"&gt;&lt;/div&gt;
   &lt;div class="container right"&gt;&lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>