CODEWITHSUNDEEP
jquerycssgoogle-chromecss-transitions
aanders77
aanders77

Reputation: 630

Is Chrome buggy when it comes to css transitions?

I'm making my div's of auto height disappear with nice transitions. I accidently found what I think is a bug in Chrome 31.0.

I've attempted to do a workaround since css3 can't handle transitions to/from auto height (there's lots of posts about that subject). So I have this code: 

$(document).on("click","#test",function(){
    var r =$(this).css("height")
    $(this).css("height", r)
    var foo = $("#test").css("height")
    $(this).addClass("test")

    $("#test").css("opacity","0")
    setTimeout(afterWait,1000)
})

This works and looks really nice. See my fiddle http://jsfiddle.net/n3g83/1/. However, I have no need for the foo variable, but if I remove it the transition stops working as it should.

In FF and IE it works in both cases.

So anyways, I thought this might be useful for others struggling with this :)

Upvotes: 2

Views: 360

Answers (1)

Fabrício Matté
Fabrício Matté

Reputation: 70139

From All you need to know about CSS Transitions:

[...] you’ll find that if you apply both sets of properties, one immediately after the other, then the browser tries to optimize the property changes, ignoring your initial properties and preventing a transition. Behind the scenes, browsers batch up property changes before painting which, while usually speeding up rendering, can sometimes have adverse affects.

The solution is to force a redraw between applying the two sets of properties. A simple method of doing this is just by accessing a DOM element’s offsetHeight property [...]

When your code invokes .css("height"), jQuery internally access the element's offsetHeight property which forces a redraw. Without this, Blink and Webkit will batch up the styling changes made by .css("height", r) and .addClass("test").

If you don't like the call to .css("height"), you can replace it with anything else that forces a redraw, e.g. accessing the element's offsetHeight property:

this.offsetHeight;

Fiddle

I've asked a similar question looking for a clean solution but apparently there's none yet.

Firefox had a similar behavior until not long ago (Firefox 23 had the same "bug") but it was fixed, so we can hope that Blink and Webkit may fix it in the future.

Upvotes: 4

Related Questions