Uneven border-radius / box-shadow combination bug?

UPDATE:

The error happens when safari tries to round the intersecting curves.

It seems there's some smoothing happening when one curve overlaps the other. If there was no smoothing, the curve would stop growing when you set a radius larger than the available area (either because your element is too short, or the adjacent curve has claiming that area too).

Safari tries to "round up" the two curves (or one curve against the next rect corner) and it fails.

In most of cases the error happens when:

1) Some value results bigger than the available width/height

2) The adjacent corner radius is cero, or its value invades the other corner's.

Using percent values fixes most of the non-cero cases. It seems the conversion to pixels always leaves some decimal noise that prevents some math resulting in cero.

I've put online my website in construction. You can test it changing the right-bottom border radius to 0px, from the three tabs at the top, and the shadow will fail (because I specified a corner radius bigger than the element's height)

http://flakeyfish.com/wp-content/themes/wee/index.html

There are other non-cero values that also make the curved corner clipping into the shadow to fail.

It seems the curves, by allowing you to enter values larger than the available lenght, are averaged, smoothed, or something like that, which works fine for the element itself, but the same invalid-curve-dealing-feature hasn't been translated to the shape that clips the inside of the shadow.

I wrote about this in detail, as how to work around it, and included some code too.

http://socialblogsitewebdesign.com/watch-out-safaris-border-radius-specific-valu es-breaking-box-shadow/

You can also test it here.

http://jsfiddle.net/jzpV6/2/

As I explained before, and as my example at jsfiddle.net, the issue happens when the height or width available for the curve is less than the specified radius.

If it was not possible to declare values greater than the available space, there would be no problem.

In your examples you didn't specify height or width.

I already submitted a bug, but since I can't "search" (all queries return cero matches) I was waiting until the search engine is fixed… but I'll try to update my original bug report… if I find it.

PS: It only fails in Safari. Not every webkit browser.

ra5ul:

Your test case didn't even included un-even corners. By un-even I meant each of the TWO values for EACH corner to be different. The total values are 8, two for each corner, but in your example you make each corner the same x & y values, by using the 4 values short-hand.

(The uploader keeps failing, as months ago. The submit remains disabled)