转换错误：缩放和溢出：隐藏在 Chrome 中

Question

使用 CSS3 属性 transform: scale，我发现了一个有趣的问题。我想为图片制作一点缩放效果。但是当我用于父 div overflow: hidden 和 border-radius 时，子 div 扩展了父 div。

更新：

问题没有解决。如果我添加transition，仍然不起作用。我试图解决这个问题，但没有成功。

这是demo

Answer 1

包装元素上的transform: translateZ(0); 对我有用。

有关此技术的更多信息，请参阅CSS performance relative to translateZ(0)。

Answer 2

透明边框对我不起作用，但更改 .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 3

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

对于更新后的要求，向带有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 样式就可以了。

Answer 7

对不起我的英语不好。

如果页面没有定位元素，则不需要同时设置容器元素和子元素的z-index属性。

只需将 z-index: 0（或其他）属性添加到容器元素。

.container {
    border-radius: .14rem;
    overflow: hidden;
    z-index: 0;
}
.child {

    }

Answer 8

这里是Solution。

HTML：

<div class="wrap">
    <div class="image"></div>
</div>

CSS：

.wrap{
    width: 400px;
    height: 260px;
    overflow: hidden;
    border-radius: 15px;
    border:1px solid transparent;
}
div.image{
    background: url(http://blog.dothegreenthing.com/wp-content/uploads/2012/10/take-a-smile.jpg) no-repeat;
    width: 400px;
    height: 260px;


}
div.image:hover{
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
    cursor: pointer;
    border:1px solid transparent;
}

Chrome 需要一个透明的border 包围盒子。 希望这会有所帮助。

Answer 9

我在使用最新版本的 Chrome 65 时遇到了类似的问题。 我有一个 iFrame 视频在 div 中使用 transform: scale() 放大，在最新的 Chrome 版本中，它不再被遮盖在侧面，而是从父容器中弹出，即使溢出：隐藏；

虽然 translateZ 有点帮助，但只有当我在父级上使用 translateX 时，它才正确掩盖宽度：

 transform:translateX(0);

Answer 10

当缩放遮罩时，该错误仍然存​​在于 webkit 浏览器（iOS 下的 Safari 和 Chrome）中。然后上面的所有解决方法都不起作用。但使用非标准 css 属性 -webkit-mask-box-image 也有助于缩放蒙版。

Answer 11

我已经关注这个很久了，唯一对我有用的是这个rotate(0.1deg) translateZ(0)。因此，如果您要缩放元素

.something:hover img{

    -webkit-transform: scale(1.1) rotate(0.1deg) translateZ(0);
    -moz-transform: scale(1.1) rotate(0.1deg) translateZ(0);
    -o-transform: scale(1.1) rotate(0.1deg) translateZ(0);
    transform: scale(1.1) rotate(0.1deg) translateZ(0);

}

没有旋转修复对我来说不起作用。

如果您将变换添加到 ANY img 父级（例如旋转图像所在的容器），您需要为元素添加相同的修复，例如

.something_parent{
    transform: translate(-9%,9%) rotate(0.1deg) translateZ(0);
    -webkit-transform: translate(-9%,9%) rotate(0.1deg) translateZ(0);
    -mos-transform: translate(-9%,9%) rotate(0.1deg) translateZ(0);
    -o-transform: translate(-9%,9%) rotate(0.1deg) translateZ(0);
}

Answer 12

在 Chrome 版本 78.0.3904.87 上，在父元素上尝试 will-change: transform、border: 1px solid transparent、transform: translateZ(0) 没有成功后，我能够通过将 border-radius 从 50% 减少到 49 来解决问题%。看来border-radius: 50% 是一个特例。

所以我的工作解决方案是：

.parent {
  z-index: 1;
  position: absolute;
  overflow: hidden;
  border-radius: 49%;
}

.child {
  z-index: 0;
  position: absolute;
}

Answer 13

添加 contain 对我有用。

contain: strict;
overflow: hidden;

https://developer.mozilla.org/en-US/docs/Web/CSS/contain

Answer 14

嗯...试图找到解决方法发现

-webkit-appearance: button; 

修复了此行为，但如果元素实际上不是按钮，则会产生一些不良副作用，例如边框行为怪异，但是，在我的情况下，将 <a> 替换为 <button> 会使缩放的内容保持在其范围内。