CSS transition glitch

Question

I have an issue with my CSS transition. I created a user profile design, and when a user hovers over the profile photo, the border changes its width from 3px to 10px. This results in the entire site shaking on the transition.

Shaking can be seen here!

CSS

#timeline-user > .timeline-user-border{
    border: 3px solid #2cbbee;
    padding: 7px;
    border-radius: 35px;
    width: 50px;
    height: 50px;
    -webkit-transition:all 0.2s ease;
}

#timeline-user > .timeline-user-border:hover{
    border: 10px solid #2cbbee;
    padding: 0;
    -webkit-transition:all 0.2s ease;
}

3066d0 · Accepted Answer · 2013-09-20T17:27:51.313

5

You can do it using

box-sizing:border-box;

basically the additional math of adding and removing paddings and borders causes alot of confusion. you can negate this by including the border and padding.

SOLUTION: http://jsfiddle.net/mvY4k/2/

Hope this helps with your problem and any other related ones! Please let me know if you have any other questions! :)

edited Sep 20 '13 at 17:27

answered Sep 20 '13 at 17:01

3066d0

1,853
1
14
18

score 2 · Answer 2 · answered Sep 20 '13 at 16:47

2

According to this article from Smashing Magazine:

Transitioning multiple properties is not synchronized in Firefox and Webkit. You can see in this example how making the border smaller by the same amount that the padding increases (and vice versa) causes the following content to shake a bit. IE 10 and Opera get this right.

And in fact if you change:

-webkit-transition:all 0.2s ease;

to:

-webkit-transition:width 0.2s ease;

You'll notice that your elements no longer shake.

I don't know of a solution, though, and if I had the rep I would've posted this as a comment.

answered Sep 20 '13 at 16:47

I am on Opera and I can see the shake too. So I guess it is for all Webkit based browsers :) – Harry Sep 20 '13 at 16:50
I was getting all sorts of crazy animation glitches when I had it set to all. Transitioning only one property fixed that. Nice! – Tspoon Aug 16 '15 at 22:19

Gildas.Tambo · Answer 3 · 2013-09-20T17:19:21.630

use box-shadow :

Demo: http://jsfiddle.net/mvY4k/4/

   #timeline-user > .timeline-user-border{
        border: 3px solid #2cbbee;
        padding: 7px;
        border-radius: 35px;
        width: 50px;
        height: 50px;
        -webkit-transition:all 0.2s ease;
    }

    #timeline-user > .timeline-user-border:hover{
        -webkit-box-shadow:inset 0 0 0 10px #2cbbee;
        -moz-box-shadow:inset 0 0 0 10px #2cbbee;
        box-shadow:inset 0 0 0 10px #2cbbee;
    }

even more simple http://jsfiddle.net/qRJQY/1/

<div class="timeline-user-line">
    <img src=http://api.randomuser.me/0.2/portraits/men/32.jpg />
</div>

the style:

*{
    box-sizing:border-box;
    padding:0;
    margin:0;
}


.timeline-user-line{
    border-radius: 100%;
    width: 50px;
    height: 50px;
    position:relative;
    border: 3px solid #2cbbee;
     -webkit-transition:all 0.2s ease;
    cursor:pointer;
    -webkit-box-shadow:inset 0 0 0 0px #2cbbee;
    -moz-box-shadow:inset 0 0 0 0px #2cbbee;
    box-shadow:inset 0 0 0 0px #2cbbee;
}

.timeline-user-line:before,.timeline-user-line:after{
    content:'';
    position:absolute;

}
.timeline-user-line:before{
    background:#2cbbee;
    height: 2px;
    width: 40px;
    right:-50px;
    top:20px;
}

.timeline-user-line img{
    width:80%;
    height:80%;
    position:absolute;
    left:10%;
    top:10%;
    border-radius: 100%;
}

.timeline-user-line:hover{
    -webkit-box-shadow:inset 0 0 0 10px #2cbbee;
    -moz-box-shadow:inset 0 0 0 10px #2cbbee;
    box-shadow:inset 0 0 0 10px #2cbbee;
}

CSS transition glitch

3 Answers3

Linked