Excessive console warnings for non-passive scroll event handlers causes browser crash

[ikoene]

Hi,

I'm experiencing a weird bug. I have a simple slider component on a webpage. It all works fine, but when accessing the webpage from a touch enabled device (f.e. a mobile phone), a console warning is thrown in an infinite loop, causing the entire page to crash.

[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.

I've already found this issue https://github.com/kenwheeler/slick/issues/3105 and tried this fork https://github.com/nicolaskopp/slick but it does not solve the issue.

====================================================================

The error only occurs from 3 slides and above.

<div class="js-slick-slider">
    <div>test</div>
    <div>test</div>
    <div>test</div>
</div>

$(document).ready(function(){
    $('.js-slick-slider').slick({
        dots: true,
        speed: 500,
        slidesToShow: 3,
        slidesToScroll: 1,
        infinite: false,
        responsive: [
            {
              breakpoint: 1200,
              settings: {
                slidesToShow: 2.1,
                slidesToScroll: 1
              }
            },
            {
                breakpoint: 800,
                settings: {
                  slidesToShow: 1.1,
                  slidesToScroll: 1
                }
              }
          ]
      });
});

====================================================================

Steps to reproduce the problem

1. Simple add the code snippet above to an HTML page.
2. Include the javascript to build the slider.
3. Refresh the page.

====================================================================

What is the expected behaviour?

The slider should function optimal on both desktop and mobile devices.

====================================================================

What is observed behaviour?

The slider loads correctly on desktop. But when switching to mobile view (using the Chrome inspector), a console error is thrown continuously repeatedly. What could be the cause of this?

[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.

====================================================================

More Details

Chrome Version 87.0.4280.88 (Official Build) (x86_64) Slick Carousel 1.8.1

[ikoene]

For anyone interested. It turns out this was caused by an infinite loop, which was triggered due to the Slick slider being the widest element on the page ánd our custom CSS setting .slick-list> overflow: visible;

All info can be found here: https://github.com/kenwheeler/slick/issues/3447#issuecomment-418137468

By setting the overflow to hidden, the bug was resolved.