Question

I’m having trouble finding a solution to this problem.
I have set up this small example here.

Google Chrome seems to break the border radius on :hover while Firefox renders it properly. What would be the correct approach to fix this?

position:relative in .bubble is probably the thing breaking it, if that’s so is there any other solution to have the .info absolute position div nested to the .bubble so top: would use the top of the .bubble and not the page?

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

I think the problem is the fact that you have an image taking up your whole background.

I’ve changed it so that you don’t have an image (and reduced the border radius) … so just basic border-radius, and of-course, things are fine:

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

http://jsfiddle.net/SbR6n/

Sounds like a bug.