title: CSS Transform causes flicker in Safari, but only when the browser is >= 2000px wide
body: <p>You read that right. Tested on multiple machines in the office and the only difference between scenarios was browser size. A coworker narrowed it down to a 2000px sweet spot. Lo-and-behold when we each resize our browsers to be >= 2000px wide and mouse over an element with a transform animation various elements on the page — specifically any element with a CSS gradient background — will flicker. Inversely, if you resize the browser to be &lt; 2000px wide and mouse over that same element no flickering occurs.</p>
  
  <p>Anyone else seen this bizarre behavior? Why is 2000px a magic number, and what exactly happens at 2000px?</p>
  
  <p><strong>NOTE</strong> — I can't really share screenshots/video/links as this site isn't yet public, and code is relatively unnecessary as this seems to be more of a browser issue than anything.</p>
  
  <p><strong>NOTE 2</strong> — My question here is really around what exactly happens in Safari at 2000px, not necessarily how to fix the flicker with <code>backface-visibility</code> or <code>translateZ</code> or the like. Reason being that we use <code>-webkit-font-smoothing: subpixel-antialiased;</code> liberally throughout the site and using any of these tricks trumps that property for the entire page, turning on antialiasing / grayscale for all text.</p>
  
  <p><strong>EDIT —</strong> Okay, sorry for not having done this earlier. Here is a bit of code in a jsFiddle that should reproduce the issue: <a href="http://jsfiddle.net/brandondurham/ujPMK/embedded/result/">http://jsfiddle.net/brandondurham/ujPMK/embedded/result/</a></p>
  
  <p>Remember, Safari has to be set to at least 2000px wide for this to happen.</p>