search

desandro / masonry

:love_hotel: Cascading grid layout plugin
https://masonry.desandro.com
16.44k stars 2.11k forks source link

Masonry grid items stutter/shake on window resize before moving elements to new position #796

Closed kdamken closed 8 years ago

kdamken commented 8 years ago

On a MacBook Pro running El Capitan (10.11.2). Tested in the latest version of Chrome (47.0.2526.106) and Safari (9.0.2). It's happening in Firefox (43.0.1) as well, though the effect isn't as bad.

Basically, when you resize the window of the codepen and elements move to their new position, they then stutter and shake before falling into their final spot. I've attached a gif to try and show the issue. stutter issue

Here's the reduced test case: http://codepen.io/epam-codepen/pen/rxLrVG

Looking forward to any insight or feedback you might have on the issue.

desandro commented 8 years ago

Thank you for providing the CodePen! Looks like the issue is how you are using transition. When set to just the duration 0.6, this gets interpreted as transition: all 0.6s. Thus, when Masonry sets top/left position, that gets transitioned as well. One way to resolve this is to specify a property. Setting transition: opacity 0.6s looks to resolve this. See http://codepen.io/desandro/pen/f164230e9b56ae0bd708490e22a39cbb/

kdamken commented 8 years ago

Good find, thank you for the help! Awesome library by the way, really solid documentation.

BenjaminChiLivinus commented 5 years ago

Thank you soooo much Desandro, your comment just saved me almost an hour of worries. I was facing the same problem Kdamken described. Your solution did the trick. And also a very big thank you for the library. I desire to so learn programming to the point where I can help make cool libraries for everyone to enjoy like yours.

Julix91 commented 5 years ago

What Benjamin said. Ran across this as well, and thanks for the library. Flickity and Masonry (plus image loader thingy for it) - gotta be careful here not to grow too dependent on you ;)