Bug with transform：scale and overflow：hidden in Chrome [英] Bug with transform: scale and overflow: hidden in Chrome

问题描述

使用CSS3属性 transform：scale ，我发现有趣的问题。我想为图片做一点放大效果。但是当我用于父div overflow：hidden 和 border-radius 时，子div扩展超出父div。

Working with CSS3 property transform: scale, I found interesting issue. I wanted to make a little zoom effect for pictures. But when I used for the parent div overflow: hidden and border-radius, the child div extended the beyond of parent div.

更新：

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

Problem isn't solved. If I add transition, is still doesn't work. I tried to solve this issue, but without success.

这是一个 演示

推荐答案

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

It's a known bug in Webkit-based browsers - see #62363. You can add a border:1px solid transparent; to your .wrap class to workaround the problem.

对于更新的需求，向 border-radius 添加一个转换，这是另一个已知的Chomre / Webkit错误＃157218 。对不起，但仍然没有已知的一般解决方法，虽然有关该bug的一个评论说使用 chrome：// flags 并使用 - ignore-gpu -blacklist 标志修复它在Chrome 29（今天刚刚打开Chrome开发渠道）。

For the updated requirement, adding a transition to an element with a border-radius, that's another known Chomre/Webkit bug #157218. Sorry but no known general workaround still, although one comment on that bug says that using the chrome://flags and using the --ignore-gpu-blacklist flag fixes it in Chrome 29 (which just hit the Chrome dev channel today).

这篇关于Bug with transform：scale and overflow：hidden in Chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！