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);为我做了诀窍。

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

Answer 3

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

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

Answer 4

解决这个发行人的两种方式都运作良好：

将以下行添加到父包装器中（图像本身不需要z-index: 0）：position: relative; z-index: 10
或者将transform: translateZ(0);添加到父包装器（带有相应的前缀以获得更好的浏览器支持）

Answer 5

这是因为合成图层未被其父图层裁剪。因此，有时您需要将带有Array ( [0] => S [1] => P [2] => X [3] => M )的父级置于其自己的合成图层上，以便正确应用overflow:hidden。

因此，您必须将CSS属性overflow:hidden添加到已转换元素的父元素。

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); }将起作用，因为变换后的元素在其自己的渲染层上被合成，就像它被转换的子元素一样。

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

Answer 6

奇怪的是，我刚刚升级到Chrome 65后遇到了这个问题，而且我将will-change: transform;添加到IFRAME样式就行了。

Answer 7

这是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 8

我在Chrome 65的最新版本中遇到了类似的问题。我在div中使用transform：scale（）扩展了iFrame视频，在最新的Chrome版本中，它不再被掩盖在侧面并且从父容器中弹出，即使有overflow：hidden;

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

 transform:translateX(0);

Answer 9

对不起，我的英语不好。

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

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

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

    }

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 parent（比如旋转图像所在的容器），则需要为元素添加相同的修复，例如

.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)失败后，我通过减少{{ 1}}从50％到49％。看来border-radius是特例。

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

border-radius: 50%

Answer 13

添加 contain 对我有用。

contain: strict;
overflow: hidden;

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

Answer 14

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

-webkit-appearance: button;

修复了这种行为，但是如果该元素实际上不是一个按钮就有一些不良副作用，比如边框表现得很奇怪，但是，在我的情况下用<a>替换<button>保持缩放内容它的界限。

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

14 个答案: