错误与转换：规模和溢出：隐藏在Chrome中
使用CSS3属性transform: scale ，我发现有趣的问题。 我想为图片做一些缩放效果。 但是，当我用父div的overflow: hidden和border-radius ，子div扩展了父div的范围。
更新：
问题没有解决。 如果我添加transition ，仍然是行不通的。 我试图解决这个问题，但没有成功。
这里是一个演示
这是基于Webkit的浏览器中已知的一个bug，参见＃62363 。 你可以添加一个border:1px solid transparent; 到你的.wrap类来解决这个问题。
对于更新的需求，添加一个带有border-radius的元素的转换，这是另一个已知的Chomre / Webkit bug ＃157218 。 对不起，但还没有知道一般的解决方法，虽然对该错误的一个评论说，使用chrome://flags和使用--ignore-gpu-blacklist标志修复它在Chrome 29（它今天刚刚击中了Chrome开发通道）。
透明的边框并没有为我工作，但改变.wrap div和图像的z-index工作（在我的情况下，图像实际上是一个video）
这是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正常工作的评论。
transform: translateZ(0); 在包裹元素上做了我的诡计。
有关此技术的更多信息，请参阅相对于translateZ（0）的CSS性能 。
解决这个问题的两种方法都运行良好：
-
将以下行添加到父包装（
z-index: 0对于图像本身不是必需的）：position: relative; z-index: 10position: relative; z-index: 10 -
或者添加
transform: translateZ(0);到一个父包装（与相应的前缀更好的浏览器支持）
发生这种情况是由于合成图层没有被其父图层裁剪。 所以有时候你需要将父类带入overflow:hidden到自己的合成图层上，这样就可以将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设备上testing最新的Safari和Chrome
这是解决scheme 。
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 。 希望这可以帮助。
在缩放遮罩时，该bug仍然存在于webkit浏览器（iOS和Safari）中。 然后上面的所有解决方法都不起作用。 但是，使用非标准的CSS属性-webkit-mask-box-image也有助于缩放遮罩。
那么…试图find一个解决方法发现
-webkit-appearance: button;
修正了这种行为，但是如果元素实际上并不是一个button，就会产生一些令人不快的副作用，就像边界行为很糟糕，但是在我的情况下用<button>replace<a>将缩放的内容保持在边界内。
