Webkit border-radius and overflow bug when using a

问题:

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?

回答1:

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?

http://jsfiddle.net/HuMrC/2/

回答2:

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)
}

回答3:

I added minus z-index value for image and higher value for parent

li {z-index:10; overflow: hidden;}

li img {z-index: -10;}

回答4:

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.

回答5:

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.