Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Em-based measurements and jerky CSS transitions in WebKit browsers

Em-based measurements and jerky CSS transitions in WebKit browsers

Problem

I'm trying to do something where it is convenient to specify coordinates in EMs and transition font-size to show my content at different sizes (it's a sort of block-based-graphics thing).

Here is a jsfiddle that illustrates the problem. It's fine in Firefox, there's no transition in IE (which is fine), but in Safari and Chrome it does a crazy jerky thing.

http://jsfiddle.net/6pf3D/2/

html:

css:

.parent{
    -webkit-transition: all;
    -webkit-transition-duration: 10s;
    background-color: rgba(0,255,0,0.3);
    font-size:16px;
    width:16em;
    height:16em;
}
.child{
    background-color: rgba(255,0,0,0.3);
    width: 8em;
    height:8em;
}

javascript:

$('.parent').css('font-size', '32px');

Does anybody know how I can get a smooth transition without sacrificing em-based coordinates?

Problem courtesy of: Michael Forrest

Solution

Here I've made a new 1, try it out

Demo(2 sec Interval)

Demo 2(10 second interval)

CSS

.parent{
    background-color: rgba(0,255,0,0.3);
    font-size:16px;
    width:16em;
    height:16em;
    transition: width 10s, height 10s;
    -moz-transition: width 10s, height 10s;
    -webkit-transition: width 10s, height 10s;
    -o-transition: width 10s, height 10s;
}

.child{
    background-color: rgba(255,0,0,0.3);
    width: 8em;
    height:8em;
    transition: width 10s, height 10s;
    -moz-transition: width 10s, height 10s;
    -webkit-transition: width 10s, height 10s;
    -o-transition: width 10s, height 10s;
}
Solution courtesy of: Mr. Alien

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Em-based measurements and jerky CSS transitions in WebKit browsers

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×