Mousewheel does't work only in Mozilla with script

RESOLVED WORKSFORME

Status

()

Core
Event Handling
RESOLVED WORKSFORME
a year ago
a year ago

People

(Reporter: honzis1364, Unassigned)

Tracking

54 Branch
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

a year ago
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.1 Safari/603.1.30

Steps to reproduce:

I want to re-make iOS 7 style blur header from this codepen:

https://codepen.io/rikschennink/pen/zvcgx
Everything works fine in the Safari and Chrome (and, whitch surprised me, on Android and iOS devices). But in the Mozilla Firefox a mousewheel doesn't work. Scroll works via scrollbar but not with a mousewheel.

This problem didn't appear just in my result (http://www.letsmind.cz), but also in original CodePen render.

I guess it's something caused with hiding the overflow, but I don't get how can it work in a Safari etc. but not just in a Mozilla.

Thank's for your time and answers if you could figure it out! :)


Actual results:

In Mozilla the scrolling via the mousewheel doesn't work


Expected results:

Like in the Chrome or Safari etc., it should scroll via the mousewheel, but it works only with scroll bar dragging.
Component: Untriaged → Event Handling
Product: Firefox → Core
mousewheel isn't defined in any spec. Use wheel event which is the standard one and supported by all modern browsers.
oh, perhaps this bug wasn't about mousewheel event.

And the site seems to work fine here. Scrolling using wheel (well, touchpad).

Could you explain what is not working?
(Reporter)

Comment 3

a year ago
(In reply to Olli Pettay [:smaug] from comment #2)
> oh, perhaps this bug wasn't about mousewheel event.
> 
> And the site seems to work fine here. Scrolling using wheel (well, touchpad).
> 
> Could you explain what is not working?

When I try to scroll on my site www.letsmind.cz (or on a https://codepen.io/rikschennink/pen/zvcgx where this script and technique is implemented), on Firefox nothing happens. Other modern browsers works perfectly fine.
And the other think is, that the scroll bar works as expected.

And weird fact is, that when I use the touchbar (on my MacBook) it works fine ! Only thing what is not working is a wheel on the mouse.
happens only on e10s and 54.
seems to be fixed at some point?
(Reporter)

Comment 5

a year ago
(In reply to Tooru Fujisawa [:arai] from comment #4)
> happens only on e10s and 54.
> seems to be fixed at some point?

I had this problem also on 53.
But I managed to fix it with the biggest fortune, by adding this javascript into my code:

    var isMouseScroll = false;

    window.addEventListener('wheel',function(e)
    {
      console.log('mouse wheel');
      isMouseScroll = true;
    });

    window.addEventListener('scroll',function(e)
    {
      if(!isMouseScroll) {
        console.log('scroll');
      }

      isMouseScroll = false;
    });

It somehow "unlocks" the mouse wheel. Dunno why, dunno how, but it works.

And the problem in Firefox is (by my thought) that when html, body{overflow:hidden;}, then when you allow to scroll div inside, it won't trigger by scrolling on the mouse (but scrollbar and touchpad are working fine). 

Thank's for your time, still it's bugged, but I know how to evade it.
Could this be some APZ related issue?
maybe dupe of bug 1357903.
See Also: → bug 1357903
WFM in nightly 55 on MacOS.
WFM, too.

Also according to comment 5, close as WFM. Feel free to reopen if you still encounter the issue.
Status: UNCONFIRMED → RESOLVED
Last Resolved: a year ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.