Safari bug, border-radius with overflow hidden and image scale zoom animation

A short article for a CSS Safari hack for zoom overflow and border-radius using -webkit-mask-image.

How to fix the safari CSS border-radius bug on a zoom with overflow hidden on the parent container?

It’s a little bug happening only on Safari. To fix it, just add the following on the parent container class

-webkit-mask-image: -webkit-radial-gradient(white, black);

You would also have overflow: hidden; on the parent container.

Bye-bye Safari bug!

Notify of

Inline Feedbacks
View all comments