Skrollr mobile broken. Unable to preventDefault inside passive event listener

Question

I'm getting the following error on all chromium browsers when using Skrollr library and loading the website as mobile:

"[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>"

The library was working fine last week and now I'm getting this error on every browser I try while loading page as mobile.

Even the examples in official github are broken when loaded on mobile and show the same error.

Does anyone know how this could be fixed?

skrollr.js:730--

https://raw.githubusercontent.com/Prinzhorn/skrollr/master/src/skrollr.js

Examples with the errors from the git links:

http://prinzhorn.github.io/skrollr/examples/docu/1.html
http://prinzhorn.github.io/skrollr/examples/docu/2.html
http://prinzhorn.github.io/skrollr/examples/docu/3.html
http://prinzhorn.github.io/skrollr/examples/docu/4.html

To replicate, - load the page, inspect, choose mobile and refresh. Suddenly it all breaks and reports errors. HTML tag should have

class="skrollr skrollr-mobile" 

if detected mobile device load.

I was developing a website using this and on the 9th of July 21 afternoon I noticed that behavior has changed and that's when I noticed the errors.

I've recreated a simple website using this and saw exactly the same problem. Later on I decided to check git hub linked examples and saw the same problem.

Could it be some sort of update to the browser cores? A fix or bypass would be greatly appreciated.

Update:

I've found out that adding the following line to CSS gets rid of the errors.

* {
  touch-action: manipulation; 
}

Unfortunately functionality of the library is still not working at 100% on mobile. The scripts that calculate the amount of scrollable area on mobile are off and adds whitespaces to the end of the document. All scroll events are affected by this miss-calculation.

Answer 1

So After looking into this matter a little bit more, I've found a solution which hopefully will help all the folks using this library in 2021 onwards.

To disable the errors add the following CSS:

* {
  touch-action: manipulation; 
}

And finally to have proper sizing of animations and no white spaces, especially if your:

transform: translateX();

gets disabled on main scroll body when you're on mobile devices, use the below code before your closing tag.

<script type="text/javascript">
        if((/Android|iPhone|iPad|iPod|BlackBerry|Windows Phone/i).test(navigator.userAgent || navigator.vendor || window.opera)){
                skrollr.init({
                forceHeight: false
                });
        } else {
                skrollr.init();
        }
</script>

This will help all who want to imitate horizontal scrolling while using vertical scrollbar.