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)

Answer 1

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

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.