Bug with transform: scale and overflow: hidden in Chrome

The transparent border did not worked for me but to change the z-index of .wrap div and image worked (in my case, image is in fact a video)

Here is the css:

.videoContainer{
    overflow: hidden;
    z-index: 10;
}

video{
    margin-left: -55%;
    transform: scale(-1,1);
    -webkit-transform: scale(-1,1);
    -moz-transform: scale(-1,1);
    z-index: 0;
}

NOTE: see Jake Blues comment below concerning the necessity to have positioned element for enabling z-index to work properly.

It's a known bug in Webkit-based browsers - see #62363. You can add a border:1px solid transparent; to your .wrap class to workaround the problem.

For the updated requirement, adding a transition to an element with a border-radius, that's another known Chomre/Webkit bug #157218. Sorry but no known general workaround still, although one comment on that bug says that using the chrome://flags and using the --ignore-gpu-blacklist flag fixes it in Chrome 29 (which just hit the Chrome dev channel today).

Both ways of solving this issuer worked fine:

1. Add the following line to a parent wrapper (z-index: 0 is not necessary for the image itself): position: relative; z-index: 10

2. Or add transform: translateZ(0); to a parent wrapper (with the corresponding prefixes for better browser support)

transform: translateZ(0); on the wrap element did the trick for me.

See CSS performance relative to translateZ(0) for more information about this technique.