Webkit border-radius and overflow bug when using any animation/transition

Question

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 o

Answer 1

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

Answer 2

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/

Answer 3

I have faced this issue on Safari(It's a known bug in safari); fixed by applying -webkit-mask-image and it work for me perfectly. cheers

.block{
       -webkit-mask-image: -webkit-radial-gradient(white, black);
      }

Answer 4

The above answer worked for me, but with a little tweak;

border: solid 0px transparent;

Answer 5

Here is what helped me:

img {
  border: solid 2px transparent;
}

Answer 6

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.