search

seiyria / bootstrap-slider

A slider control for Bootstrap 3 & 4.
http://seiyria.github.io/bootstrap-slider/
Other
2.99k stars 1.14k forks source link

Error: Unable to preventDefault inside passive event listener invocation. #842

Open LufoX11 opened 6 years ago

LufoX11 commented 6 years ago

Chrome devtools is returning this error when dragging to change a value: http://nimb.ws/eb6jMn

It might be something with Chrome > 56 as mentioned here: https://github.com/bevacqua/dragula/issues/468

Upvoted solution: https://github.com/bevacqua/dragula/issues/468#issuecomment-284085998 "touch-action: none to the drag handle".

tkmiller3 commented 6 years ago

This is a problem when a touch-drag on the slider handle happens on a scrollbar within in a scrollable element. The touch-drag will cause the element to scroll, and also moves the handle (as it should). The problem is how to prevent the container from scrolling when the intent is just to drag the handle. Setting "touch-action: none" on the drag handle results in the correct behavior in Chrome devtools (although error message still appears). However, the unwanted scroll of the container still occurs on the mobile device (in my case I'm testing on an iPhone 6).

Based on this explanation I think that the line: let eventOptions = supportsPassive ? { passive: true } : false; should be amended to: let eventOptions = supportsPassive ? { passive: false } : false;

That gets rid of the warning in Chrome devtools, but still doesn't fix the scrolling issue on iOS.

jespirit commented 5 years ago

See this link about passive listeners and preventDefault(): addEventListener Parameters

passive: A Boolean which, if true, indicates that the function specified by listener will never call preventDefault(). If a passive listener does call preventDefault(), the user agent will do nothing other than generate a console warning.