CSS3 Scaling box with box-shadow disappears in Safari 7

Question

got a strange issue with safari 7.

I have a simple box that gets scaled on hover the funny thing since Safari 7 it seams that the box shadow disappears when scaling the box.

Does anyone else had this issue and a solution?

---

Running example: http://pizzadatoni.ch/shop/chur/pizza-xxextra/

Thanks for your help :)

Answer 1

Looks like it's a bug in Webkit (as of this writing in the webkit nightly). Here's a simple demo to reproduce. And here's the bug report I filed.

Answer 2

It's not a fix, but you can avoid this problem by using filter: drop-shadow() instead of box-shadow().

Answer 3

Oddly enough, applying a border-radius (even a small one) seems to fix the problem.

border-radius: 0.02px;

see a demo here: http://codepen.io/anon/pen/ONWOGp