title: CSS3 Transform causing text to flicker in Safari and Firefox Mac Yosemite
body: <p>I'm having this weird issue on Safari and Firefox (Mac/Yosemite) that causes almost all of the text on the page to flicker when hovering over the transforming element.</p>
  
  <p>Example gif: (Firefox, Yosemite)</p>
  
  <p><img src="https://i.stack.imgur.com/je5zQ.gif" alt="enter image description here"></p>
  
  <pre><code>.usp {
     //USP has an icon that is defined below
      opacity: .4;
      @include transition(all .3s ease-in-out);
  
  
      &amp;:hover { 
          opacity: 1;
          @include transition(all .3s ease-in-out);
  
  
          .icon {
              @include transform(scale(1.1));
              @include transition(all 1.7s ease-in-out);
          }
      } // :hover
  } 
  
  .usp .icon {
      display: block;
      height: 75px;
      width: 75px;
      // Insert background-image sprite (removed from this example)
      @include transition(all .3s ease-in-out); 
      @include transform(scale(1.0));
  }
  </code></pre>
  
  <p>I've tried the following things:</p>
  
  <p>Add every possible combination of these styles to the body, the transforming element and/or his parent</p>
  
  <pre><code>-webkit-transform-style:preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
   backface-visibility: hidden;
  -webkit-filter: opacity(.9999);
  -webkit-font-smoothing: antialiased;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
  -webkit-font-smoothing: subpixel-antialiased;
  -webkit-text-stroke: 0.35px;
  </code></pre>
  
  <p>If (styles below) are applied to the body, the problem is fixed in Safari but not in Firefox as it is not a webkit browser.</p>
  
  <pre><code>-webkit-transform: translate3d(0, 0, 0);
  -webkit-text-stroke: 0.35px;
  </code></pre>
  
  <p>I have literally no idea what causes this and how I can fix it!</p>