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:

  • 2
    I tried to edit the text a bit, but before I try to suggest if another site would be better and migrate it, can you clarify what you are looking for primarily? Do you want this to be about JQuery needing a patch or about WebKit/Safari? We are more focused on users here and although some are programmers and web developers, we are not the best place for code level and bug/regression level knowledge. We can point you towards how to file a bug with Apple, but generally don't have detailed html/css/js Q&A here. – bmike Nov 11 '12 at 19:00
  • 1
    I am perfectly fine...imgur.com/a/vICCs I'm running Safari 6.0.1 on OS X Lion 10.7.5 – daviesgeek Nov 11 '12 at 19:11
  • @bmike My guess is this is a Mountain Lion problem, and not an html/css/js problem. – René Nov 14 '12 at 12:08
  • I just asked a colleague who also runs Mountain Lion: no problems there. So the source of the problem remains a mystery to me. – René Nov 14 '12 at 12:15
  • 1
    @René According to blackpixel.com/blog/2012/02/radar-or-gtfo.html it's a good idea to raise duplicate bugs with Apple, so it's probably a good idea if you report it too! – Olly Hodgson Jan 30 '13 at 9:50

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

  • 1
    Adding the relevant quote of the update notes, for instance, would highly increase the value of your answer. – Thecafremo Mar 15 '13 at 10:50
  • 1
    It wasn't actually noted in the update notes, but it did solve it. Tried it myself before and after update. – Guido Hendriks Mar 15 '13 at 11:11
  • 1
    Looks like it has been fixed by Apple with the release of Mountain Lion 10.8.3 + Safari 6.0.3 this week. – Sinklar Mar 15 '13 at 16:47

Here are things I would do if you can't provide a link to something that is live on the internet for others to duplicate / suss out what's happening.

  1. Try a nightly webkit build to see if it's a bug that's fixed, but not shipping. http://nightly.webkit.org

  2. Remove all extensions from Safari to be sure it's not caused by one.

  • I've added links to the websites shown on the screenshots. – René Nov 20 '12 at 9:39
  • I tried both your suggestions but unfortunately they didn't work. – René Nov 20 '12 at 9:43

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):


And the SO question it came from:


  • 1
    Thanks for sharing this. I'm not convinced it's a webkit issue though, since this problem is specific to OS X Mountain Lion and only with HD4000 graphics. – René Nov 26 '12 at 12:32

I can also confirm this bug on retina 15" macbook (osx 10.8.2, safari 6.0.2)

My macbook also has Intel HD4000, but also Nvidia GT 650M for the external display.

To eliminate all other possibilities but the graphics card (driver) I used a thunderbolt to dvi adapter to connect an external display on the Nvidia card.

Result: No weird lines and freaky jquery effects!

conclusion: HD4000 (driver) problem.


This is not Intel HD 4000 bug. I can see this bug only from Safari on Intel HD 4000. If i open page with (Opera, Chrome, Firefox) - i can not reproduce this bug


A quick fix to this problem is using a transform on the object with the border-radius or other damage causing property. That way you're forcing a redraw with the graphics card, and that removes the problem.

Apply the following property: -webkit-transform: translate3d(0,0,0); - And you should be fine.

  • Has a not insignificant performance cost if you apply it to a div containing lots of stuff, but does workaround the bug. – James Feb 10 '13 at 19:24
  • Performance cost? I'd like to see some data on this. Any added cost should be handled by the GPU. – Kalms Feb 14 '13 at 13:46
  • 1
    A null transform creates a backing texture for that element on the GPU. This makes moving the element cheap as it's a composite rather than a paint, but it makes changes to the element more expensive (eg text, dimension, style changes) as it needs to upload a new texture to the GPU as well as repainting the element. You also take up GPU memory, which can be an issue on phones. – JaffaTheCake Mar 10 '13 at 11:54
  • Thank you for that. Any good recommendations for information on this? – Kalms Mar 11 '13 at 12:41

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .