变换错误:缩放和溢出:隐藏在Chrome中

Question

使用CSS3属性transform: scale,我发现了一个有趣的问题.我想为照片制作一点缩放效果.但是,当我用父DIV overflow: hidden和border-radius,孩子的div扩展父div的超越.

更新:

问题没有解决.如果我添加transition,仍然无法正常工作.我试图解决这个问题,但没有成功.

这是一个演示

Answer 1

透明边框对我来说不起作用,但改变.wrap div的z-index和图像工作(在我的情况下,图像实际上是一个视频)

这是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;
}

注意:请参阅下面的Jake Blues评论,其中包含定位元素以使z-index正常工作的必要性.

Answer 2

transform: translateZ(0); 在wrap元素上为我做了诀窍.

有关此技术的详细信息,请参阅相对于translateZ(0)的CSS性能.

Answer 3

这是基于Webkit的浏览器中的已知错误 - 请参阅#62363.您可以border:1px solid transparent;在.wrap课程中添加一个来解决问题.

对于更新的需求,添加到具有a的元素的转换border-radius,这是另一个已知的Chomre/Webkit错误#157218.抱歉,但仍然没有已知的一般解决方法,尽管有关该错误的评论说使用chrome://flags并使用该--ignore-gpu-blacklist标记将其修复为Chrome 29(今天刚刚访问Chrome开发者频道).

Answer 4

解决这个发行人的两种方式都很好:

1. 将以下行添加到父包装器(z-index: 0对于图像本身不是必需的):position: relative; z-index: 10

2. 或者添加transform: translateZ(0);到父包装器(带有相应的前缀以获得更好的浏览器支持)

Answer 5

这是因为合成图层未被其父图层裁剪.因此,有时您需要将父项overflow:hidden放在其自己的合成层上,以便它可以overflow:hidden正确应用.

因此,您必须将CSS属性添加transform: translateZ(0)到已转换元素的父元素.

/* add to parent so it is composited on its own layer before rendering */
.parent-of-transformed-element {
     -webkit-transform:translateZ(0);
     transform:translateZ(0);
}

然后overflow:hidden将工作,因为变换后的元素在其自己的渲染层上合成,就像它变换后的子元素一样.

在iOS和非iOS设备上测试最新的Safari和Chrome

Answer 6

奇怪的是，在升级到Chrome 65之后，我只是遇到了这个问题，对我来说，添加will-change: transform;IFRAME样式就可以解决问题。