谷歌chrome上的边界半径突破

Question

我很难找到这个问题的解决方案。我在这里举了一个小例子。

谷歌浏览器似乎打破了上的边界半径：悬停，而Firefox则正确渲染。解决这个问题的正确方法是什么？

.boom中的position:relative可能会破坏它，如果是这样的话，有没有其他解决方案可以将.info绝对位置div嵌套到.poom中，这样top:就会使用.foom的顶部，而不是页面？

HTML:

<div class="bubble">
    <img src="http://oneslidephotography.com/wp-content/uploads/2009/05/Digital-SLR-Photography-All-in-One-For-Dummies-sample-image.jpg" />
    <div class="info">
        <h3>Some Info Text</h3>
    </div>
</div>

CSS：

.bubble {
    position: relative;
    float: left;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
}
.info {
    overflow: hidden;
    position: absolute;
    width: inherit;
    -webkit-transition: top 0.2s ease-out;
    -moz-transition: top 0.2s ease-out;
    -o-transition: top 0.2s ease-out;
    -ms-transition: top 0.2s ease-out;
    transition: top 0.2s ease-out;
    top:200px;
}
.bubble:hover .info {
    top:80px;
}
.info h3{
    text-align: center;
    font-family: sans-serif;
}

Answer 1

我认为问题在于图像占据了整个背景。

我已经更改了它，这样你就没有图像了（并减少了边界半径）。。。所以只有基本的边界半径，当然，一切都很好：

<div class="bubble" style='border:solid 1px'>
    <div class="info">
        <h3>Some Info Text</h3>
    </div>
</div>

http://jsfiddle.net/SbR6n/

听起来像个bug。