title: Hover transform scale issue on Chrome
body: <p>I showed my problem on <a href="http://youtu.be/UQ7gwPmbRz8" rel="nofollow">this film</a> and the browser is Chrome (v. 44.0.2403.107 m). The background image should scale up and down after mouse hover and left. But sometimes Chrome skips animation giving this rough movements. I tested it also on IE, Mozilla, Opera and there is no such issue, everything is fine. </p>
  
  <p>I'm working on category element zoom on hover, but I want only the image to scale and not description. Previously I could achieve it with <code>background-size</code> <code>transition</code> on <code>.categoryItem</code> list element, but unfortunately IE does not support percentages in <code>bacground-size</code> for <code>transition</code>s. So I came up with below workaround, which is less, but still problematic.</p>
  
  <p>Why I'm adding style to an element in HTML - it's the part of jquery script. The concept is to allow user add their own images in CMS through <code>img</code> tag, which is the part of <code>li</code> element, but it's hidden, and it's <code>src</code> is copied to <code>div</code>'s background-image url.</p>
  
  <p>I tried:</p>
  
  <ul>
  <li>Adding <code>z-index</code>es to <code>categoryItem</code> and <code>categoryItemImage</code></li>
  <li>Adding <code>webkit-backface-visibility:hidden</code></li>
  <li>Adding <code>ease-in-out</code></li>
  <li>Delaying <code>transition</code></li>
  <li>Searching similar problem on google for couple hours</li>
  </ul>
  
  <p>What else I can do?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    padding: 0;
  }
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .categoryItem {
    position: relative;
    background: black;
    transition: all 2.5s;
    -webkit-transition: all 2.5s;
    -moz-transition: all 2.5s;
    -ms-transition: all 2.5s;
  }
  .categoryItemImage {
    position: relative;
    transition: all 1.5s;
    -webkit-transition: all 1.5s;
    -moz-transition: all 1.5s;
    -ms-transition: all 1.5s;
  }
  .categoryItem:hover .categoryItemImage {
    transform: scale(1.035, 1.035);
    -webkit-transform: scale(1.035, 1.035);
    -moz-transform: scale(1.035, 1.035);
    -ms-transform: scale(1.035, 1.035);
    transition: all 2.5s;
    -webkit-transition: all 2.5s;
    -moz-transition: all 2.5s;
    -ms-transition: all 2.5s;
  }
  .categoryItemDescription {
    max-width: 500px;
    position: absolute;
    left: 50px;
    bottom: 100px;
    background-color: #ffffff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="categoriesOverview"&gt;
    &lt;li class="categoryItem" style="height: 433.3px; overflow:hidden;"&gt;
      &lt;div class="categoryItemImage" style="height:inherit; background-image: url(http://lorempixel.com/1920/572) !important; background-position: 50% 50%;"&gt;&lt;/div&gt;
      &lt;div class="categoryItemDescription"&gt;
        &lt;h2&gt;The title&lt;/h2&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex sed neque dignissim imperdiet eget a odio. Etiam semper mollis scelerisque. Integer rutrum, dolor ac efficitur viverra, nulla augue vulputate turpis, a vulputate sapien leo
          a dui. Sed id lectus tellus. Curabitur at congue ante.&lt;/p&gt;
        &lt;a class="button" href="#"&gt;Click me&lt;/a&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>