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

Question

I have some artifacts on Safari 6.0.2 on Mountain Lion on my Macbook Pro using any other browser that displays everything that should be. But curiously, using Safari on my iMac with OSX Lion, I cannot reproduce the problem. Different OS version, different GPUs, an error? or am I 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 inches, 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 now no longer exist, as in the OS X 10.8.3 communique that Apple hit on March 14, 2013.

Answer 2

Update:

In the old version of Safari for Windows, I can replicate the error. However, with the latest version for Windows, I could not use it. As I said, on Windows, when I used the webkit extension, it disappeared.

But Apple hates Windows users; so I can not check it on any other version, and then.

This may very well be a mistake in how Safari Browser reads and implements code; Has this changed recently? Or maybe some kind of distinctive operating system, hardware change too.

Try updating your graphics card driver directly from ATI or Nvidia. It’s strange.

---

For better compatibility with Safari; you can use the -webkit extension. You can find more information here:

An example you should try:

 -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 it usually cascades the stylesheet. Of course, he adds extra code, but he tends to maximize compatibility. Hope this helps. I reproduced your problem with Safari on Windows; but with -webkit it disappeared.

But as mentioned above; some software or hardware may cause an artifact. This can happen with overclocked equipment. Hope this helps.

Answer 3

The problem also exists in Safari 6.0.4 on iPhone 5 with iOS 11.2.1. Artifacts with the tag css box. Invalid RGB colors. Black with transparency looks white!