64

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

更新：

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

这是一个演示

4

14 回答 14

32

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

有关此技术的更多信息，请参阅相对于 translateZ(0) 的 CSS 性能。

于 2014-12-01T16:43:05.470 回答
28

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

于 2014-06-05T09:36:42.210 回答
24

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

对于更新后的要求，使用 向元素添加过渡border-radius，这是另一个已知的 Chomre/Webkit 错误#157218。抱歉，但仍然没有已知的通用解决方法，尽管关于该错误的一条评论说使用chrome://flags和使用--ignore-gpu-blacklist标志在 Chrome 29 中修复了它（今天刚刚进入 Chrome 开发频道）。

于 2013-05-22T08:42:14.647 回答
18

解决这个问题的两种方法都很好：

  1. 将以下行添加到父包装器（z-index: 0图像本身不需要）：position: relative; z-index: 10

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

于 2015-07-28T20:48:49.737 回答
10

发生这种情况是因为合成图层没有被其父图层裁剪。所以有时你需要把父级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 上测试

于 2016-02-16T17:12:20.477 回答
6

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

于 2018-04-03T10:18:18.877 回答
3

对不起我糟糕的英语。

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

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

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

    }
于 2019-05-25T08:04:17.680 回答
2

这是解决方案。

的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;
}

borderChrome 需要在盒子周围有一个透明的。希望这可以帮助。

于 2013-05-22T08:41:32.273 回答
2

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

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

 transform:translateX(0);
于 2018-03-27T20:47:11.147 回答
0

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

于 2015-07-07T21:05:26.587 回答
0

我已经很久了，唯一对我有用的是这个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);

}

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

如果您将变换添加到任何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);
}
于 2018-03-08T21:07:45.517 回答
0

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

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

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

.child {
  z-index: 0;
  position: absolute;
}
于 2019-11-11T09:19:12.440 回答
0

添加contain对我有用。

contain: strict;
overflow: hidden;

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

于 2021-02-10T16:03:53.777 回答
-1

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

-webkit-appearance: button;

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

于 2017-02-12T19:28:45.553 回答