simonwep / pickr

🎨 Flat, simple, multi-themed, responsive and hackable Color-Picker library. No dependencies, no jQuery. Compatible with all CSS Frameworks e.g. Bootstrap, Materialize. Supports alpha channel, rgba, hsla, hsva and more!
https://simonwep.github.io/pickr
MIT License
4.31k stars 285 forks source link

Chrome warnings about non-passive event listener #214

Closed insad closed 4 years ago

insad commented 4 years ago

Chrome (latest version on Win 7 / Ubuntu 18.04) issues a lot of warnings:

[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

due to the code in pickr.js (lines 414-423 in version 1.7.0):

            // Cancel input detection on color change
            _.on([
                _root.palette.palette,
                _root.palette.picker,
                _root.hue.slider,
                _root.hue.picker,
                _root.opacity.slider,
                _root.opacity.picker
            ], ['mousedown', 'touchstart'], () => this._recalc = true)
        ];

Adding 'passive: true' solves this:

            _.on([
                _root.palette.palette,
                _root.palette.picker,
                _root.hue.slider,
                _root.hue.picker,
                _root.opacity.slider,
                _root.opacity.picker
            ], ['mousedown', 'touchstart'], () => this._recalc = true, { passive: true })
simonwep commented 4 years ago

Thanks for reporting, fixed in 6778cf779b697b9dd05045aaab100676e691d87e :)