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 Firefox
Teak's jsfiddle on Safari
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