Webkit ignoring overflow:hidden when background is animated with @keyframes

[patz]

HI all,

I’m trying to zoom a background image masked by a circle using border radius. After some research I’ve learned there appears to be a webkit bug regarding border-radius masking absolutely positioned elements.

But in this example: http://jsfiddle.net/5m1n5xeg/1/
(which works perfectly in firefox) if you take off the keyframe animations in the css, you will see that the outer div masks the inner element as it should - in webkit also. It’s when the animation is applied the overflow no longer works.

Here is another example of the affect I’m trying to achieve working perfectly on everything (including webkit) but only on hover, using transitions instead: http://jsfiddle.net/dhepce3p/

Is there a way I could combine forces of these techniques somehow, or even another workaround altogether?

I’ve also read about using :after on the element as well as positioning a white square with a punched out circle over the top as a hack, but this needs to go over another texture and so needs to be transparent!

Thanks in advance.

[RyanReese]

That’s a tricky little bug. Never seen that before.

I did manage to get the radius working by applying a transform to the PARENT element as well, and causing it to scale normally. Here is my fiddle.

Edit fiddle - JSFiddle - Code Playground

You’ll need to mess with the animations to get them lining up in every browser though.

It’s not so much the animations are causing it. The parent having border-radius and overflow:hidden; is causing it.

https://bugs.webkit.org/show_bug.cgi?id=98538

Obviously there may be a better solution but I’m just giving you what I’ve got…if you do go my way, you’ll want ot take note that the parent animation only affects webkit only (since webkit is the only browser having this funky behavior.)