Artifacts on CSS rendering box-shadow on Safari 6.0.2 on mountain lion

Question

I'm having some artifacts on Safari 6.0.2 on Mountain Lion on my Macbook Pro, using any other browser everything render as it is supposed to be. But curiously using Safari on my iMac with OSX Lion I can't reproduce the issue. Different OS version, different GPU, bug? or i'm doing something wrong?

Reproduction: http://jsfiddle.net/gt2g4/ and http://jsfiddle.net/T966K/1/

CSS:

#test{

    width: 150px;
    height: 150px;

    border-radius: 50%;

    background-color: blue;
    box-shadow: inset 0px 3px 0px yellow,
                inset 0px -3px 0px darkred,
                -3px -4px -0px blue;
}

About this mac:

MacBook Pro 13-inch, Mid 2012.

• Graphics Intel HD Graphics 4000 384 MB.

• Software OS X 10.8.2 (12C60).

• Safari Version 6.0.2 (8536.26.17)

Historic

Welcome to the real world) here cold be different reasons for acting up, may be software or/and hardware – Spiracle

@Spiracle could you reproduce the issue in your browser? – Historic

I reported it as a bug bugs.webkit.org/show_bug.cgi?id=103087 – Historic

I'm running Safari 6.02 Mountain Lion on a mid-2011 Mac Mini with a Radeon HD 6630M and I'm not getting those glitches. – Tatiana

@Historic So it looks like it is specific to your version of Safari and Hardware. As in older versions it works without any problem, but then installing 6.0.2 the artifact appears. That is what I found in my testing. – Loosing

@ChrisHerbert I did some testing; and in older versions of Safari the issue actually disappears. But when you install 6.0.2 it appears. So that version may interpret or may not be working correctly with particular graphics hardware. – Loosing

Answer 1

These artifacts are now nonexistent as of OS X 10.8.3 combo update that Apple pushed March 14th, 2013.

Contrast

Confirmed, the 10.8.3 update fixed the issue on my macbook pro. – Historic

Answer 2

Update:

On an older version of Windows Safari I could replicate the error. However, with the latest version for Windows I could not use it. As I stated, on Windows when I used the webkit extension it vanished.

But Apple hates Windows users; so I can't test it on any other version then this.

It very well could be a bug in the way that Safari Browser is reading and implementing the code; has it changed recently? Or there may be some distinguishing Operating System, Hardware change either.

Try updating your graphics card driver directly from ATI or Nvidia. Odd indeed.

---

For the best Safari compatibility; you may want to use -webkit extension. You can find additional details here:

An example you should try would be this:

-webkit-box-shadow: inset 0 3px 0 yellow,
                    inset 0 -3px 0 darkred,
                    -3px -4px 0 blue;

To maximize compatibility I use;

• -moz for Mozilla Firefox.
• -webkit for Safari and Chrome.
• -o for Opera.

Then normally Cascading Stylesheet. Sure it adds some additional code, but it tends to maximize compatibility. Hopefully that helps. I reproduced your issue with Safari on Windows; but with -webkit it vanished.

But as mentioned above; some software or hardware may be causing the artifact. It can occur with overclocked hardware. Hopefully that helps though.

Loosing

can you show screenshots of the effect vanishing after using the -webkit prefix? I'm very surprised that would make a difference. – Tatiana

Yeah, no problem. I'll do it tomorrow when I'm back at my office. – Loosing

I see the same artifacts on my rMPB, and -webkit- has changed nothing. – Contrast

@JacksonGariety I'm assuming you mean your Macbook Pro? I can't test it on my Mac, as I don't have a Mac I have a Windows machine. I did test it with an earlier Safari and replicated and fixed with webkit. On the latest version for Windows I don't even need webkit and it renders fine. Could be a bug in that version of Safari. – Loosing

Yeah retina MacBook pro. It probably differs from graphics card to graphics card. – Contrast

@JacksonGariety Yeah, all my Windows machines don't appear to replicate on our latest version. Only that older version; I'd say it's a bug with that version of Safari. Have you tried using an older version to see if the issue still exists? – Loosing

Just confirmed the webkit bug is not present in 5.0.5. – Contrast

@JacksonGariety So it must be a bug with that later version of Safari. Weird bug. – Loosing

Yeah i'll take a look at the webkit source code and release a patch if I can, but it might be buried way deep and tough to resolve, or it would probably be fixed by now. – Contrast

@JacksonGariety Well at least we found an answer to this question. – Loosing

@JacksonGariety Graphics card related, I was never a big fan of these Intel Cards, mine is Graphics Intel HD Graphics 4000 384 MB which I suppose is the same as yours. I'm doing the combo update right now, let's see if it fixes. – Historic