title: -transform:scale causing 'blinking' when hovering
body: <p>I am working on a catalog which uses css -transform attribute to scale each 'swatch' upon hovering.</p>
  
  <p>Here's my problem: In some browsers and on certain sites, when you hover over the swatches, it causes the page to 'blink' as your roll over them. I cannot nail the problem down either, on one site it may be unique to Safari, on another it may only happen in Chrome, on another it's perfectly fine.</p>
  
  <p>Wish I had more information, but maybe someone else has run into a similar problem.</p>
  
  <p><img src="https://i.stack.imgur.com/5DhsD.jpg" alt="Screenshot of catalog"></p>
  
  <pre><code>.swatch {
    -webkit-box-shadow: #EFEFEF 2px 2px 0px;
    -webkit-transform: scale(1);
    -webkit-transition-duration: 0.2s;
    border: 1px solid white;
    position: relative;
    z-index: 1;
  
  .swatch:hover {
    position:relative;
    z-index:10;
    transition-duration: 0.2s;
    transform:scale(1.8);
    -webkit-transition-duration: 0.2s;
    -webkit-transform:scale(1.8);
  }
  </code></pre>
  
  <p>It also seems that the problem is remedied when removing any z-index attributes, but then the hover swatch is behind the other swatches; which does not work for this project.</p>
  
  <p>Any thoughts are appreciated.</p>