I am having getting a weird bug when I use a combination of overflow, border-radius, and transition. I have a div with an img inside of it. The div has a border radius and overflow set to hidden. When I hover over the img I have a transition that takes place which makes the image larger to create a zooming effect. The problem is that the overflow seems to break on the bottom left and bottom right of the image.
I have created a jsfiddle for you to see what I'm talking about. http://jsfiddle.net/dmcgrew/HuMrC/1/
It works fine in Firefox but breaks in Chrome and Safari.
Anyone know what might be causing this or how to fix it?
I don't know if I'm understanding the problem correctly as the image isn't loading. If you add height: 100%; to .inner_block does it help your issue?
I had the same exact issue. Adding this to the parent container solved it for me (this is a LESS mixin).
.transitionfix() {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0)
}
I added minus z-index value for image and higher value for parent
li {z-index:10; overflow: hidden;}
li img {z-index: -10;}
The accepted answer didn't work for me because I can't have the clear border increasing the clickable area of the masked element, nor do I want it to obscure that of other elements (and setting the height to 100% didn't solve the issue).
See my answer to a related question for a possible solution.
I've had an issue in the past like this while trying to zoom into a photo inside a div. I fixed it by adding rotation scale(1.05) rotate(0.02deg) to the scale transform
(It actually removed the glitchy lines)
My issue today is getting the glitch lines off a translateY div hover effect. Surprisingly enough, I got rid of them by removing overflow: hidden;
Hopefully this helps future debuggers.
来源：https://stackoverflow.com/questions/14383632/webkit-border-radius-and-overflow-bug-when-using-any-animation-transition