Cleaning up CSS jitters

Question

I've built these circles that expand a border when there is a mouseover. The only problem I'm getting now is some times the circle will jitter/shake. And it becomes more apparent when I set the transition: all .1s ease-in-out; to more than .2s.

Is there a work around to this problem or is that just the way it is?

Here's the code in JsFiddle

Thanks for any and all help!

EDIT: I am transitioning the dimensions (width and height) of the circles to maintain centering. I realize this is causing the jittering during the transition. Is there a work around?

position relative seems to clear it up a bit. but you have to redo all the css. i fiddled with it a bit and was able to get the jitter to go away but it totally changed the functionality. — nathan hayfield, May 13 '13 at 23:49
played with it too, but there is still jitter: http://jsfiddle.net/enBMC/7/ — Alp, May 13 '13 at 23:53
yeah... seems to be happening because of the transition property is not uniformly moving all the other properties simultaneously. — David, May 13 '13 at 23:56
apparently Chrome iterates through the transitions, but Firefox does them one by one. Chrome has no jitter for me (Firefox does) — Deborah, May 14 '13 at 07:00
There is jitter in Chrome too. If you play with the transition duration, it becomes obvious (at least here at linux/64bit) — Alp, May 14 '13 at 08:11

score 7 · Accepted Answer · answered May 13 '13 at 23:57

I got rid of the percent values for top/left positioning, cleaned up the margins and aligned the border-width of the outer circle:

Here is a DEMO

.box {
    position: relative;
    width: 220px;
    height: 220px;
    float: left;
    margin-right: 50px;
}

.clearcircle {
    position: absolute;
    top:15px;
    left:15px;
    width: 190px;
    height:190px;
    border-radius: 100%;
    background-color: transparent;
    border: 5px solid #c0392b;
    transition: all .2s ease-in-out;
}

.clearcircle:hover {
    width:220px;
    height: 220px;
    top: 0px;
    left: 0px;
    border: 5px solid #c0392b;

}
.circle {
    position: absolute;
    top:50%;
    margin-top: -100px;
    left: 50%;
    margin-left:-100px;
    width: 200px;
    height:200px;
    border-radius: 100%;
    background-color: #e74c3c;
    overflow: hidden;
    transition: all .2s ease-in-out;

}


.circle p {
    position:relative;
    text-align: center;
    top: 50%;
    margin-top: -55px;
    color: white;
    transition: all .3s;
}


.circle:hover{
    background-color: #e97468;
}

That seemed to remove the jitter in the jfiddle example. Unfortunately, in my code where I'm actually using these circles the jitter remains, even with your code. HOWEVER, your code did reduce the jitter! — David, May 14 '13 at 00:04
Maybe you could upload your page or expand the fiddle example. — Alp, May 14 '13 at 08:10
made some minor tweaks to your example here and have perfect results now. Thanks for the help! You've led me down the right path. Also sorry for the late reply, I've been busy all day also in Berlin time zone... :D — David, May 15 '13 at 00:23

score 1 · Answer 2 · answered May 14 '13 at 00:00

Don't transition the width and the height. Keep the same width and height and just transition the border of your outer circle.

For your inner circle (.circle), set a white border 12px solid #ffffff. Now it is always in the same place relative to the outer circle, and now it will not have to change size. Also the title can not jump around because it is always in the same position.

For the outer circle, when it is not hovered, make sure it has the same size and border as when it is, but make the border white, 5px solid #ffffff.

I think you can then also do away with a lot of your extra positioning.

Here is a modified jsFiddle so you can take a look, and here is the CSS modified:

.box {
position: relative;
width: 220px;
height: 220px;
float: left;
margin-right: 50px;
    text-align: center;
}

.clearcircle {
width: 225px;
height:225px;
border-radius: 100%;
background-color: transparent;
border: 5px solid #ffffff;
transition: all .2s ease-in-out;
}

.clearcircle:hover {
border: 5px solid #c0392b;

}
.circle {
width: 200px;
height:200px;
    border: 12px solid #ffffff;
border-radius: 100%;
background-color: #e74c3c;
overflow: hidden;
transition: all .2s ease-in-out;

}


.circle p {
position:relative;
text-align: center;
color: white;
transition: all .3s;
}


.circle:hover{
background-color: #e97468;
}

Incidentally, putting a div or a p in your a tag breaks the tag for validated XHTML. You may want to use a div instead, with an "on click" action added that causes it to behave as a link.

although your markup is cleaner, the example is doing something different than the animation of the op — Alp, May 14 '13 at 00:02
while I understand your reasoning, I've made my circles the way they are for the animation of the border expanding from behind the circle. In your example, the border just fades in, mine has more of an expanding look to it. I would like to keep that look. — David, May 14 '13 at 00:08
oh ! yes, my bad. I have to say Alp's demo worked perfectly when I tested it. — Deborah, May 14 '13 at 06:51

score 1 · Answer 3 · answered Feb 24 '19 at 01:22

1

Debounce jitter by margin: 0 -12%; if adding padding padding: 0 12%;

menu li a:hover {
    margin: 0 -12%;
    padding: 0 12%;
    color: #fff;
    background: #ff5a5f;
    display: inline-block;
}

answered Feb 24 '19 at 01:22

Dmytro Yurchenko

187
2
3

Cleaning up CSS jitters

3 Answers3

Linked