Open kienhg96 opened 6 years ago
React Masonry sometimes renders incorrect children position (overlap).
Image: https://ibb.co/mduYe8
After I wrap this.masonry.layout() by setTimeout inside performLayout method, it renders correctly.
this.masonry.layout()
setTimeout
performLayout
performLayout: function() { var diff = this.diffDomChildren(); var reloadItems = diff.forceItemReload || diff.moved.length > 0; // Would never be true. (see comments of 'diffDomChildren' about 'removed') if (diff.removed.length > 0) { if (this.props.enableResizableChildren) { diff.removed.forEach(this.erd.removeAllListeners, this.erd); } this.masonry.remove(diff.removed); reloadItems = true; } if (diff.appended.length > 0) { this.masonry.appended(diff.appended); if (diff.prepended.length === 0) { reloadItems = true; } if (this.props.enableResizableChildren) { diff.appended.forEach(this.listenToElementResize, this); } } if (diff.prepended.length > 0) { this.masonry.prepended(diff.prepended); if (this.props.enableResizableChildren) { diff.prepended.forEach(this.listenToElementResize, this); } } if (reloadItems) { this.masonry.reloadItems(); } // ===> HERE setTimeout(() => { this.masonry.layout(); }); // === },
Hi @eiriklv, this happens to my project too, but just unpredictably, do you have any suggestions to fix this?
React Masonry sometimes renders incorrect children position (overlap).
Image: https://ibb.co/mduYe8
After I wrap
this.masonry.layout()
bysetTimeout
insideperformLayout
method, it renders correctly.