title: CSS transition background-image jump hover in Safari
body: <p>I have an issue with a transition effect in Safari and could use some help. My CSS hover swaps background images, as it should, but the hover image 'jumps' from its position, up and to the left (which I don't want to happen). Thanks.</p>
  
  <p>Structure:</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>.sidebar .widget {
   height: 276px;
   width: 326px;
   background:url('/wp-content/themes/a-theme/svg/polygon-image.svg') no-repeat center center;
   background-size: 100%;
  }
  
  .sidebar .widget:hover {
   background:url('/wp-content/themes/a-theme/svg/polygon-image-hover.svg') no-repeat center center;
   background-size: 100%;
   transition: 0.5s ease-in-out;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="sidebar"&gt;
   &lt;aside id="black-studio-tinymce-18" class="widget widget_black_studio_tinymce"&gt;
    &lt;div class="textwidget"&gt;
     &lt;h3 style="text-align: center;"&gt;Sample Text&lt;br&gt;&lt;/h3&gt;
    &lt;/div&gt;
   &lt;/aside&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>