Bug 103087 – box-shadow with inset plus border-radius is causing rendering artifacts

• Component: CSS
• Status: RESOLVED INVALID

Created attachment 175703 [details]
screenshot of the issue

A DIV with box-shadow with inset plus border-radius is causing artifacts on the right of the rendering shadow.

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.

Stackoverflow thread:
http://stackoverflow.com/questions/13505314/artifacts-on-css-rendering-box-shadow-on-safari-6-0-2-on-mountain-lion

CSS
#test{
    width: 200px;
    height: 200px;

    border-radius: 50%;
    background-color: blue;
    box-shadow: inset -3px 0 0 yellow;
}

reproduction http://jsfiddle.net/T966K/1/

screenshot attached

I could reproduce the issue on a

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)

I could not reproduce on a 

iMac 21.5-inch, Mid 2011
Graphics AMD Radeon HD 6750M 512 MB
Software Mac OS X Lion 10.7.5 (11G63)
Safari 6.0.2 (7536.26.17)

[Simon Fraser (smfr)]

<rdar://problem/12750455>

[Vladimir Kadnikov]

I have MacBook Pro 15'' with Intel HD 4000 and nVidia GeForce GT 650M.

In Safari:
If i set videocard to Intel HD 4000 - i see this bug.
On nVidia - all ok.

In other browsers (Opera, Firefox, Chrome):

On all video cards - all ok.

OS: Mountain Lion 10.8.2
Safari 6.0.2 (8536.26.17)

[René van Mil]

Related question over here: http://apple.stackexchange.com/questions/71065/safari-6-rendering-issues-artifacts-on-mountain-lion

I can reproduce this on a:

MacBook Air 13-inch, Mid 2012
Intel HD Graphics 4000 512 MB
OS X 10.8.2 (12C3006)
Safari 6.0.2 (8536.26.17)

[Tim Horton]

Since this bug is dependent on OS and/or video hardware, it's not a WebKit bug. Please file it at bugreporter.apple.com instead (though, in this case, Simon's already done that for you).