Hey! Take a look at the slideshow on http://edenspiekermann.com and make sure to resize your window to a greater width than 1220. Now you should see iOSesque navigational dots below the big slideshow image. Move your mouse pointer outside the slideshow area (otherwise it stays paused) and wait a couple of seconds for the slideshow to start playing. The transitions are archieved through CSS with translate3d. When the slideshow plays, you'll see weird rendering bugs appear on the navigational dots, see the attached screenshot for an example. Basically it mixes up the :hover pseudo class and renders artifacts of my current class which is used to highlight the currently active slide. The changing of classes is done programmatically with JS, using the Prototype library. A few interesting observations: - This happens only in Safari, including the latest nightly build from webkit.org, but not in Chrome - I was only able to test it on OSX, so I currently don't know it it is present on Windows as well - When using 'translate' instead of 'translate3d' the rendering glitches are gone, but I'd like to stick with 'translate3d' because otherwise the page behaves very weird in MobileSafari Since it only happens when using translate3d it might be related to hardware acceleration? Just a guess.
Created attachment 79570 [details] screenshot of the rendering glitches... usually there should be just one dot in plain black, the grey comes from a :hover class
I can reproduce this.
<rdar://problem/8892952>
layout has changed