Max call stack exceeded (infinite loop) on mobile

https://jsbin.com/nedubarado/edit?html

Steps to reproduce the problem

1. Visit https://output.jsbin.com/nedubarado in Chrome
2. Open DevTools and Enable device emulation
3. Select Galaxy S5 from the dropdown (any sufficiently small resolution screen should do)
4. Reload the page

What is the expected behaviour?

The page loads with the carousel

What is observed behaviour?

The page enters an infinite loop before reaching max call stack exceeded (and crashing outright on low-powered devices)

More Details

• Which browsers/versions does it happen on? Tested on Chrome stable (66) and Canary (68)
• Slick version? Tested and confirmed on 1.6 and 1.9
• Did this work before? Unknown

@paulirish and I dug into this, it looks like the loop is in the init/refresh/checkResponsive loop https://github.com/kenwheeler/slick/blob/a2aa3fec335c50aceb58f6ef6d22df8e5f3238e1/slick/slick.js#L595-L608

The issue is that .init (which calls .setPosition) mutates the window.innerWidth which causes respondToWidth to change between checkResponsive calls. As a result, checkResponsive flips back and forth between activeBreakpoint = null and targetBreakpoint = null forever.

Originally reported in https://github.com/GoogleChrome/lighthouse/issues/5208

[willbroderick]

This seems to occur when the slideshow directly affects the page width - so when it’s the widest thing on the page. In our case, it was because we took overflow:hidden off the “slick-list” div. Using Slick’s styles unmodified, or making sure the slideshow is inside another container with overflow:hidden and width:100%, avoids this error (for us).

[hellojebus]

@willbroderick you are a god amongst mortals