CODEWITHSUNDEEP
csstranslation
Ozik Abdullaev
Ozik Abdullaev

Reputation: 1026

CSS transition glitch

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;
}

Upvotes: 2

Views: 6719

Answers (3)

blackeyebeefhorsefly
blackeyebeefhorsefly

Reputation: 1949

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! :)

Upvotes: 5

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

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;
}

Upvotes: 0

user2458067
user2458067

Reputation:

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.

Upvotes: 2

Related Questions