Infinite loop in _renderGrid

[chlirre]

I was able to make both Chrome and Safari freeze.

Steps to reproduce

• Change
  box.className = 'box size' + Math.ceil( Math.random()*3 ) + Math.ceil( Math.random()*3 );
  to
  box.className = 'box size' + Math.ceil( Math.random()*15 ) + Math.ceil( Math.random()*15 );
  in makeboxes.js
• Append or prepend some boxes until you get some big ones.
• Make the browser window really narrow.

_renderGrid seems to loop

I'm guessing one of the for-loops within the while(true){} never breaks.

Maybe I shouldn't make that big boxes?

But there should be some nice fallback, right?

[james-pykl]

I was able to reproduce the issue as well, by simply making my browser window fairly narrow (approximately the size of a smartphone in landscape orientation). I didn't make any changes to the code to increase the size of the boxes as nested generates them, although I see where this can be accomplished in _setBoxes(). I was also able to trace the source of the infinite loop as the while loop in _renderGrid().

[james-pykl]

Looks like the condition that creates the infinite loop occurs when the viewport is reduced to less than the size of the widest element in the grid.

[thedaian]

This seems to occur when this.columns and col in _renderGrid() are equal. It effectively prevents for (var column = 0; column < (this.columns - col); column++) { from running and results in an infinite loop.

I've fixed this locally by adding the following code before the while(true) loop

if(this.columns === col) {
    this.columns++;
}

[MetaHeavies]

This sorts out another issue where if minWidth was larger than 242px I would get the same infinite loop / break.

[eablokker]

This issue has 4 duplicates in #17 #30 #44 #48. This really needs to be fixed already! Can someone fix and do a pull request? If the dev is MIA, maybe do a fork?

[MetaHeavies]

Started using https://github.com/metafizzy/packery as an alternative

[testuserlove]

Try as explained here.
#48
This works for me.