Safari 6 rendering issues/artifacts (on Mountain Lion)

Final update I just received an email from Apple confirming this bug has been fixed in OS X Mountain Lion 10.8.3


I've been having rendering issues with Safari 6 on different systems all running Mountain Lion, and I'm unable to find a solution. I've attached some screenshots to describe the issue.

Update Further investigation suggests that this might be a problem with 2012 Mac models only, specifically the ones with HD4000 graphics.

Update It appears the artifacts don't always show up immediately, requiring some reloads and/or closing/reopening tabs before they show up.

Update The issue is confirmed as not a WebKit bug, and has been filed as a bug at Apple (problem 12750455 by Simon Fraser).

Twitter Bootstrap website on Safari

Twitter Bootstrap website on Safari

Twitter Bootstrap website on Firefox

Twitter Bootstrap website on Firefox

Teak's jsfiddle on Safari

Teak's jsfiddle on Safari

Teak's jsfiddle on Firefox

Teak's jsfiddle on Firefox

Links to the websites shown on the screenshots:

  • Twitter Bootstrap
  • Teak's jsfiddle

It was a bug in Safari, resolved in OSX Update 10.8.3!


I can confirm this is a bug with the Intel Graphics 4000 GPU. I see the graphics artifacts on my 13" Retina MacBook Pro and not on my older MBP which has Mt. Lion and an Nvidia Geforce GPU.

I have first hand experience with this issue while trying to develop css buttons for websites...

I believe the artifacts can be reproduced by using the css3 border-radius in conjunction with a box-shadow. Though obviously it happens in many other circumstances as well. (Which I can confirm)

Here is a link to a bug report on webkit website (though I'm not sure it belongs there):

https://bugs.webkit.org/show_bug.cgi?id=103087

And the SO question it came from:

https://stackoverflow.com/questions/13505314/artifacts-on-css-rendering-box-shadow-on-safari-6-0-2-on-mountain-lion