All geek questions in one place

JQuery and masonry (): animated objects flicker in Chrome

I load a couple of <li> elements on the page via .ajax() and stack them on top of each other. Then the user can

  • drag individual items around
  • hit heap to rebuild the stack.
  • click "spread" to expand the elements using jquery.masonry ()

The problem arises in the latter case: when the elements are distributed, the elements go to the indicated position in the grid as they should, and then instantly blink to the original position.

Watch the video here: Video (Quicktime.mov)
Watch the demo here: Live Demo

The problem occurs only about 50% of the time, and not every time I distribute the elements. For example, in the video above, this only happens the second and last time I click "spread". I could not say what exactly was causing the error. The problem occurs in Chrome 29.0.1547.57 on Mac. Firefox 22 and Safari 6.0.5 are not affected. I have not tried other browsers yet.

When you click on a link with the extension .masonry () is called as follows:

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

I am grateful for the advice on how to solve this.

Update: I noticed that the problem also occurs on other sites that use jquery.masonry, for example, the plugin site itself. Watch the video here: Video . Does other people have the same problem or is it my setup (OS X 10.7.5, Chrome 29.0.1547.57)?

+4
source share
2 answers

I had the same problem. This was caused by CSS transitions in the grid-item style. Removing CSS3 transitions for specific DOM elements solved my problem.

+2
source

I just found this while looking for the same problem. I was starting to wonder if it was my monitor or cable.

I am using Windows 8 and Chrome version 30.0.1599.101 m

0
source

Source: https://habr.com/ru/post/1498830/

More articles:


All Articles