12

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:

Improve this question
10
  • 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 ♦
    Commented Nov 11, 2012 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
    Commented Nov 11, 2012 at 19:11
  • @bmike My guess is this is a Mountain Lion problem, and not an html/css/js problem.
    – René
    Commented Nov 14, 2012 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é
    Commented Nov 14, 2012 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
    Commented Jan 30, 2013 at 9:50

6 Answers 6

Reset to default
3

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

Improve this answer
3
  • 1
    Adding the relevant quote of the update notes, for instance, would highly increase the value of your answer.
    – Thecafremo
    Commented Mar 15, 2013 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
    Commented Mar 15, 2013 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
    Commented Mar 15, 2013 at 16:47
8
+50

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

Improve this answer
1
  • 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é
    Commented Nov 26, 2012 at 12:32
2

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

Improve this answer
2

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.

Improve this answer
4
  • Has a not insignificant performance cost if you apply it to a div containing lots of stuff, but does workaround the bug.
    – James
    Commented Feb 10, 2013 at 19:24
  • Performance cost? I'd like to see some data on this. Any added cost should be handled by the GPU.
    – Kalms
    Commented Feb 14, 2013 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
    Commented Mar 10, 2013 at 11:54
  • Thank you for that. Any good recommendations for information on this?
    – Kalms
    Commented Mar 11, 2013 at 12:41
1

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.

Improve this answer
2
  • I've added links to the websites shown on the screenshots.
    – René
    Commented Nov 20, 2012 at 9:39
  • I tried both your suggestions but unfortunately they didn't work.
    – René
    Commented Nov 20, 2012 at 9:43
1

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.

Improve this answer

You must log in to answer this question.

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