Question

How do I stop flickering of this div when it’s hovered, it is only having issue in firefox, chrome is fine

http://jsfiddle.net/GpuUb/

jQuery solutions are fine

CSS

div {
    height: 30px;
    width: 30px;
    background-color: #000;
    margin: 50px;
    border-radius: 15px;
    transition: all 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
}

div:hover {
    height: 300px;
    width: 300px;
    background-color: #000;
    margin: 50px;
    border-radius: 150px;
}

Answer 1

It’s not so much flickering as it is losing the hover event. Firefox does not detect your mouse in the whitespace portion of the border-radius as a hover. If you move your mouse such that it stays in the black portion, it smoothly transitions.

I’m not sure if this is a bug in Firefox, the other browsers, or it’s undefined by the spec. From what I’ve read in the CSS3 specification, there’s no discussion about how border-radius might affect the box model. Perhaps by that omission, it shouldn’t affect the box model and then this would be a defect in Firefox.

You can fix it with a wrapped container div, but that’s not terribly elegant. Here’s a modified version of yours with the wrapper div.

HTML

<div id="container"><div id="circle"></div></div>

CSS

div#container {
    display: inline-block;
    background-color: green;
    margin: 50px;
}
div#circle {
    height: 30px;
    width: 30px;
    background-color: #000;
    border-radius: 15px;
    transition: all 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
}

div#container:hover div {
    width: 300px;
    height: 300px;
    background-color: #000;
    border-radius: 150px;
}

Here’s the jsFiddle to play with.