Webkit border-radius和overflow bug当使用任何动画/转换 [英] Webkit border-radius and overflow bug when using any animation/transition

问题描述

我有得到一个奇怪的错误，当我使用溢，边界半径，并结合 transition 。我有一个内部的img的div。 div有一个边界半径和溢出设置为隐藏。当我将鼠标悬停在img上时，我发生了一个转换，使得图像变大以创建缩放效果。问题是溢出似乎在图像的左下方和右下方断裂。

我创建了一个jsfiddle，让你看到我在说什么。 http://jsfiddle.net/dmcgrew/HuMrC/1/

它在Firefox中正常工作，但在Chrome和Safari中断。

任何人都知道可能导致此问题或如何解决问题？

解决方案

我不知道我是否正确地理解问题，因为图像未加载。如果您添加 height：100％; 到 .inner_block 能帮助您解决问题吗？

http://jsfiddle.net/HuMrC/2/ p>

I am having getting a weird bug when I use a combination of overflow, border-radius, and transition. I have a div with an img inside of it. The div has a border radius and overflow set to hidden. When I hover over the img I have a transition that takes place which makes the image larger to create a zooming effect. The problem is that the overflow seems to break on the bottom left and bottom right of the image.

I have created a jsfiddle for you to see what I'm talking about. http://jsfiddle.net/dmcgrew/HuMrC/1/

It works fine in Firefox but breaks in Chrome and Safari.

Anyone know what might be causing this or how to fix it?

解决方案

I don't know if I'm understanding the problem correctly as the image isn't loading. If you add height: 100%; to .inner_block does it help your issue?

http://jsfiddle.net/HuMrC/2/

这篇关于Webkit border-radius和overflow bug当使用任何动画/转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！