jQuery and masonry(): animated objects flickering in Chrome

Question

I am loading a couple of <li> elements on a page via .ajax() and stack them on top of each other. The user can then

• drag individual elements around
• click on "pile" to rebuild the stack
• click on "spread" to spread elements out with jquery.masonry()

The problem occurs in the last option: When spreading out the items, the elements go to their designated position in the grid as they should and then flash for a little moment back to their original position.

See a video here: Video (Quicktime .mov)
See a live demo here: Live Demo

The problem only occurs about 50% of the time, not every time I spread the items. For instance, in the video above it only happens the second and the last time I click on "spread". I have not been able to tell what exactly causes the bug to occur. The problem occurs in Chrome 29.0.1547.57 on a Mac. Firefox 22 and Safari 6.0.5 are not affected. I haven't tried any other browsers yet.

When the spread link is clicked .masonry() is called this way:

    $('.content').masonry({
        columnWidth: 180,
        gutter: 20,
        itemSelector: 'li',
        isResizeBound: false,
        isLayoutInstant: false
    });

I am thankful for hints on how to solve this.

Update: I noticed that the problem also occurs on other sites which use jquery.masonry, such as the plugin's site itself. See the video here: Video. Do other people have the same issue or is this my setup (OS X 10.7.5, Chrome 29.0.1547.57)?

Answer 1

I had the same issue. It was caused due to the CSS transitions on the grid-item's style. Removing the CSS3 transitions for the specific DOM elements solved my issue.