Chosen: Mouse wheel scrolling jerky in FireFox

Created on 9 Jun 2016 · 7Comments · Source: harvesthq/chosen

As reported in issue #2543 - Scrolling is still very jerky when using the mouse wheel in firefox.

Steps to reproduce

I used the latest FF for Mac (currently version 47.0). And can confirm that the issue does occur on the Chosen demo page. Scrolling with the scroll bars is fine, but it is very jerky if you use the center of the mouse to scroll.

Environment

Chosen Version: 1.5.1
jQuery or Prototype Version: jQuery 1.9.1, but I also tested with the latest jQuery 2.2.4 and had the same issue.
Browser and Version: FireFox v47.0
OS and Version: Mac OS X 10.10.5

Additional information

I was able to reproduce and fix the problem locally by adding the wheel event and altering the following lines in the chosen javaScript code:

this.search_results.bind('mousewheel.chosen DOMMouseScroll.chosen', function(evt) { _this.search_results_mousewheel(evt); });

this.search_results.bind('mousewheel.chosen DOMMouseScroll.chosen wheel.chosen', function(evt) { _this.search_results_mousewheel(evt); });

I got this fix from a suggestion on stack overflow. however, I do not know enough about it to offer as a patch. Perhaps it'll break another browser? I am not sure. Also the linked answer includes something about MozMousePixelScroll, which might also be a correct fix.

Firefox

Source

scottdoc

👍2

Most helpful comment

Got this problem in firefox latest, chosen latest

someother1 on 15 Feb 2017

👍2

All 7 comments

OK, I tried using MozMousePixelScroll.chosen in that line instead of wheel.chosen and it didn't work.

Leaving wheel.chosen in there seemed to work OK in Chrome version 50 and Safari version 9.1.1

scottdoc on 9 Jun 2016

Had this problem on Chrome, upgraded from jQuery 2.2 to 3.1 and it went away.

bbuchanan on 8 Sep 2016

👍1

I'm not sure what you mean by jerky, but I too see a weird scrolling behavior with the Chosen demo page in Firefox (fast scrolling).

koenpunt on 16 Sep 2016

Had this problem in Firefox, on Chosen demo pages and my own page. The original suggested fix of adding wheel.chosen to the bind events worked for me.

brondsem on 4 Nov 2016

Had this problem in Firefox with jquery-mousewheel, because of renaming the event type from DOMMouseScroll to mousewheel, code in
if (evt.type === 'DOMMouseScroll') {
doesn't work
so we need something like this:
if (evt.type === 'DOMMouseScroll' || (evt.type === 'mousewheel' && delta==3)) {

yadbat on 29 Dec 2016

👍1

Got this problem in firefox latest, chosen latest

someother1 on 15 Feb 2017

👍2

I still can confirm the bug in latest Firefox (72.0.1) on a 5K iMac macOS 10.14.6 and on a MacBook (no retina), chosen 1.8.7, on the Chosen demo page with jQuery 3.2.1 and in our application with jQuery 1.12.4.

Wenn scrolling a dropdown with optgroup content (on the demo page, in our application every drop down), the scrolling of FF is very jerky, the div „jumps“ during scrolling. You can see it best if you use a trackpad or the MagicMouse.

Two fixes give a working solution for the problem:
– add "wheel.chosen" as mentioned above -> then scrolling becomes smooth but very slow in FF
– add the „factor fix“ of #2823 (we don't use jquery mousewheel plugin!) -> scrolling is ok in FF and all other browsers we've testet so far