Reputation: 7337
I've got a little animation on a center-piece image, it zooms in a bit and then returns to its original size.
Trouble is, the animation "overrides" the border radius on the parent element even though it has overflow hidden on it.
Any ideas?
Upvotes: 3
Views: 997
Reputation: 12672
This is a bug in Webkit. overflow: hidden
does not hide a transformed element's overflow on the corners. For more information have a look at https://bugs.webkit.org/show_bug.cgi?id=67950.
Upvotes: 2
Reputation: 5038
The problem is background-color
of your .image
class expands upto the #promo
and covers up the border-radius
set by pane
class.
You have to set:
background-color: transparent; //in image class,
and,
background-color: #91bd09;
in your pane
class.
See this updated fiddle.
Upvotes: 0