Chrome console error: Unable to preventDefault inside passive event listener

Pasha · June 22, 2018, 8:33am

I see in Chrome console many Errors:
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

I use
lime 6.4.0
openfl 8.2.2.

to reproduce i use defualt BunnyMark sample
open Chrome in device mode
and drag mouse anywhere

singmajesty · June 22, 2018, 2:24pm

Is it occurring from this line?

github.com

openfl/openfl/blob/develop/assets/templates/html5/template/index.html#L20


	<meta name="apple-mobile-web-app-capable" content="yes">
	
	::if favicons::::foreach (favicons)::
	<link rel="::__current__.rel::" type="::__current__.type::" href="::__current__.href::">::end::::end::
	
	::if linkedLibraries::::foreach (linkedLibraries)::
	<script type="text/javascript" src="::__current__::"></script>::end::::end::
	<script type="text/javascript" src="./::APP_FILE::.js"></script>
	
	<script>
		window.addEventListener ("touchmove", function (event) { event.preventDefault (); }, false);
		if (typeof window.devicePixelRatio != 'undefined' && window.devicePixelRatio > 2) {
			var meta = document.getElementById ("viewport");
			meta.setAttribute ('content', 'width=device-width, initial-scale=' + (2 / window.devicePixelRatio) + ', user-scalable=no');
		}
	</script>
	
	<style>
		html,body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
		#openfl-content { background: #000000; width: ::if (WIN_RESIZABLE)::100%::elseif (WIN_WIDTH > 0)::::WIN_WIDTH::px::else::100%::end::; height: ::if (WIN_RESIZABLE)::100%::elseif (WIN_WIDTH > 0)::::WIN_HEIGHT::px::else::100%::end::; }
::foreach assets::::if (type == "font")::::if (cssFontFace)::::cssFontFace::::else::

This is designed to prevent default touchmove behaviors on mobile (so you can swipe within your content without scrolling the page).

If this is the cause, we’ll have to think about whether there is an alternative

Pasha · June 25, 2018, 6:43am

Yes, this line reason
I change it to this line (change “false” to “{passive : false}”)

window.addEventListener ("touchmove", function (event) { event.preventDefault (); }, {passive: false});

and no more errors in console

singmajesty · June 25, 2018, 6:29pm

Thanks! I’ve committed this to both and Lime and OpenFL

juanr · May 15, 2019, 9:29pm

Hi, I have a problem.
On my website, there is an error with the smooth scroll file. And it is observed in the google console. This happens every time you slide across the screen.
I have no knowledge in programming but my intuition tells me to get to a correct link.
Can somebody help me.
Thank you

singmajesty · May 15, 2019, 10:22pm

Is this the library you are looking for?

github.com

gblazex/smoothscroll-for-websites/blob/master/SmoothScroll.js#L380


    // delta is 120 most of the time
    // synaptics seems to send 1 sometimes
    if (Math.abs(deltaX) > 1.2) {
        deltaX *= options.stepSize / 120;
    }
    if (Math.abs(deltaY) > 1.2) {
        deltaY *= options.stepSize / 120;
    }
    
    scrollArray(overflowing, deltaX, deltaY);
    event.preventDefault();
    scheduleClearCache();
}


/**
 * Keydown event handler.
 * @param {Object} event
 */
function keydown(event) {


    var target   = event.target;

EDIT

This latest version of the library looks like it may have a fix for the passive event listener issue:

github.com

gblazex/smoothscroll-for-websites/blob/master/SmoothScroll.js#L746-L755


var supportsPassive = false;
try {
  window.addEventListener("test", null, Object.defineProperty({}, 'passive', {
    get: function () {
            supportsPassive = true;
        } 
    }));
} catch(e) {}


var wheelOpt = supportsPassive ? { passive: false } : false;

An_An · July 21, 2019, 7:22pm

Thank you have help me

testtheme_testtheme · August 29, 2019, 10:45am

Just Add below CSS. it will solve your issue.

.owl-carousel {
-ms-touch-action: pan-y;
touch-action: pan-y;
}