Question

I have a container div that holds about 20 more divs that float left. When I resize the parent div with a javascript animation using Tween.js the floats don’t reflow to the new size unless I mouse over one of the divs.

It seems like something is preventing the page from refreshing.

I’m thinking maybe there is a way through javascript to force the display to update?

UPDATE:

I’ve put it on JS Fiddle:
http://jsfiddle.net/mattlundstrom/fNUhn/

Click any thumbnail to toggle the animation.
This version uses TweenLite to animate the “Left” CSS of the #project-container. Notice how you must move your mouse after the animation to get the container’s contents to reflow.

I get this result in Safari 5+ OSX and Chrome 20+ OSX. Works as expected in Firefox 13.0 OSX.

UPDATE 2

Video of what I’m seeing:
http://f.cl.ly/items/1R1n2s0U3I3c1M3s2K0T/lundstrom_float_issue.mov

Answer 1

I was able to recreate your issue just as you said. It seems that it is an issue with webkit redrawing or measuring the elements after an animation or transition.

This isn’t the best solution by any means, but for the time being at least it will work and hopefully what I found will help other people to be able to find out more.

If you add an onComplete to the animation, and trigger the .project mouseleave, it looks to work fine:

function completeAnimate(){
        $('.project').trigger('mouseleave');
    }

    function contract(){

        // PROJECTS CONTRACT RIGHT
        TweenLite.to($('#projects-container'), .5, {css:{left:"300px", opacity:".5"}, ease:Expo.easeInOut, onComplete: completeAnimate});
    }

So here is my jsfiddle which has a few tests and other animation tests so that you can see some of what I tried.

jQuery animate() and css keyframe animations have the same result as the Tween code you are using, HOWEVER, a straight style update works fine.

$('#projects-container').css('left','300px'); 

No issues with that at all, but of course, no animation either.

Some other things I noticed was that if you take out the .project event bindings, it still doesn’t redraw correctly, however if you move you mouse it still doesn’t. It simply stays that way.

I also tried forcing an element redraw using a few tricks you can usually use to force a redraw. I tried this oncomplete and at intervals after the animation begins, but had no luck with any of it.

You can also combine the two tweens into one with the properties on both, just an FYI.

Hopefully this will help someone find the true issue that’s going on with the webkit transitions.