Webkit CSS Transition not working when changing float property

Question

Kill the annoying bug in Webkit browsers where CSS transitions don't start if you change the float property. Here's a script for a demo: http://jsfiddle.net/patrickmarabeas/RxeWc/

Essentially, if you look at the transition when changing the width of an element, but also change float: left; on float: none; , the transition simply does not work. This causes additional problems when you intend to invoke some JS during the transition phase:

 $('#element').one('transitionend webkitTransitionEnd oTransitionEnd otransitionend', function(){ ... } 

I apply a class that changes the float property of elements before changing the width, and tried both:

 $(this).toggleClass('removeFloat widthChange'); //and $(this).toggleClass('removeFloat'); $(this).toggleClass('widthChange'); 

I ran into this problem due to the need to use white-space: nowrap; in one specific instance of the layout - which does not work with floating elements.

Answer 1

A typical SO session, take an hour to figure out the root problem, do a SO search for a solution, don’t find it, carefully construct a question with a Fiddle example, while continuing with all kinds of suggestions that someone might come up with as a result of your own problem. Thought it was an odd ball, sufficient for publication anyway.

You just need to learn the CSS elements after installing it and before setting it up:

 $(this).toggleClass('removeFloat'); $(this).css('float'); //or any other valid property $(this).toggleClass('widthChange'); 

See this updated script: http://jsfiddle.net/patrickmarabeas/vrcaA/

---

Edit: Chrome is trying to fix the problem