title: CSS background image transition "shakes" when transitioning
body: <p>I have an image banner that rotates images by using jQuery to update the background-image property. When transition between two images the new image will "shake" until the transition is complete. The CSS for the banner is as follows:</p>
  
  <pre><code>div#reviewPanel {
      width: calc(100% + 100px);
      background: no-repeat center;
      -moz-background-size: cover;
      -webkit-background-size: cover;
      background-size: cover;
      text-align: center;
      padding: 0;
      margin: 0 -50px;
      position: relative;
      -webkit-transition: background-image 2s ease-in-out;
      transition: background-image 2s ease-in-out;
      background-color: #1f292d;
      max-height: 600px;
  }
  </code></pre>
  
  <p>The height for the banner is set dynamically based on the screen size but is set before the background image is applied and the issue persists if I set a fixed height.</p>
  
  <p>You can see an example here: 
  <a href="https://jsfiddle.net/jbuckland/rs5eqhaj/" rel="nofollow noreferrer">https://jsfiddle.net/jbuckland/rs5eqhaj/</a></p>
  
  <p>I have tested in Chrome and Safari on Mac, I'm not sure if the behavior exists in other browsers/OS.</p>
  
  <p>I know this a relatively new CSS feature so I'm not sure if it's just a bug but any help would be greatly appreciated.  </p>