Bug with transform: scale and overflow: hidden in Chrome

Question

Working with CSS3 property transform: scale, I found interesting issue. I wanted to make a little zoom effect for pictures. But when I used for the parent div overflow: hidden and border-radius, the child div extended the beyond of parent div.

Update:

Problem isn't solved. If I add transition, is still doesn't work. I tried to solve this issue, but without success.

Here is a demo

Answer 1

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.