www.ocus.com - see bug description

[miketaylr]

URL: https://www.ocus.com/en/

Browser / Version: Firefox 67.0
Operating System: Mac OS X 10.14
Tested Another Browser: Yes

Problem type: Something else
Description: Scrolling with mousewheel not working
Steps to Reproduce:
Load the page, and try to scroll with the mousewheel -- it doesn't work. You can click the little "scroll" button at the bottm and it's fine, but in Chrome I can scroll w/ mouse.

Browser Configuration

• mixed active content blocked: false
• image.mem.shared: true
• buildID: 20190331141835
• tracking content blocked: false
• gfx.webrender.blob-images: true
• hasTouchScreen: false
• mixed passive content blocked: false
• gfx.webrender.enabled: false
• gfx.webrender.all: false
• channel: aurora

Console Messages:

[u'[console.log(THREE.WebGLRenderer, 100) https://www.ocus.com/assets/scripts/three.min.js:177:216]', u'[JavaScript Warning: "Error: WebGL warning: getContext: Disallowing antialiased backbuffers due to blacklisting." {file: "https://www.ocus.com/assets/scripts/three.min.js" line: 180}]']

From webcompat.com with ❤️

[miketaylr]

see also https://twitter.com/vladikoff/status/1123232230774460416

[vladikoff]

Scrolling works when swiping on the touchpad, though it's not real scrolling.
When scrolling with a real mouse wheel in Firefox, the site does nothing.

The site uses this lib and seems to try to handle Firefox, example: https://github.com/ayamflow/virtual-scroll/blob/master/src/index.js#L77

https://github.com/ayamflow/virtual-scroll/blob/master/src/index.js#L99

[karlcow]

So what @vladikoff pointed out with a permalink in case it changes.

https://github.com/ayamflow/virtual-scroll/blob/af80799c81afb5247e2dc5a8856731c11f1b12d5/src/index.js#L72-L92

https://github.com/ayamflow/virtual-scroll/blob/af80799c81afb5247e2dc5a8856731c11f1b12d5/src/index.js#L94-L104

There is this issue deltaMode default should be DOM_DELTA_PIXEL

I believe they apply this firefoxMultiplier because of Firefox deltaMode being DOM_DELTA_LINE.

It also probably means that if Firefox was changing the default behavior this code would break :/

[karlcow]

That said if they fix it it should work, so why this is not working.
so maybe my analysis is wrong. I should try to put a mouse trap in the garden. Yeah I do not have a mouse at home.

[karlcow]

fwiw slow touchpad movement and it's broken.
quick touchpad movement and it's working.
@miketaylr do you see the same thing with the mouse wheel?

[karlcow]

                               {
                                  key: '_observe',
                                  value: function () {
                                    this.resizer.on('resize', this._onResizeHandler),
                                    this.infos.detect.isTouch ? (this.swiper.on('swipeup', this._onSwipeupHandler), this.swiper.on('swipedown', this._onSwipedownHandler))  : this.$.section.on('wheel', this._onWheelingHandler),
                                    this.$.section.on('mousemove', this._onMousemoveHandler),
                                    this.three.camera.on('startTraveling', this._onStartTravelingHandler),
                                    this.three.camera.on('endTraveling', this._onEndTravelingHandler),
                                    this.$.scrolldown.on('click', this._onClickScrolldownHandler),
                                    this.three.interface.on('navClick', this._onClickNavHandler)
                                  }
                                },
                                {
                                  key: '_onResizeHandler',
                                  value: function () {
                                    this.three.isPaused || (this.vars.ww = window.innerWidth, this.vars.wh = 0.5625 * this.vars.ww, this.three.camera && this.three.camera.onResizeHandler && this.three.camera.onResizeHandler(), this._coverCanvas())
                                  }
                                },
                                {
                                  key: '_onWheelingHandler',
                                  value: function (e) {
                                    if (!this.three.isPaused) {
                                      var t = e.deltaY;
                                      Math.abs(t) > this.params.wheelDelta && (this.three.camera.isTraveling || (0 < t ? this.next()  : this.prev()))
                                    }
                                  }
                                },
                                {
                                  key: '_onSwipeupHandler',
                                  value: function () {
                                    this.next()
                                  }
                                },
                                {
                                  key: '_onSwipedownHandler',
                                  value: function () {
                                    this.prev()
                                  }
                                },
                                {
                                  key: '_onClickScrolldownHandler',
                                  value: function () {
                                    this.three.camera.isTraveling || this.next()
                                  }
                                },
                                {
                                  key: '_onClickNavHandler',
                                  value: function (e) {
                                    this.three.camera.isTraveling || this.navTo(e.index)
                                  }
                                },
                                {
                                  key: '_onMousemoveHandler',
                                  value: function (e) {
                                    this.three.isPaused || this.three.camera && this.three.camera.onMousemoveHandler && this.three.camera.onMousemoveHandler(e)
                                  }
                                },
                                {
                                  key: '_onStartTravelingHandler',
                                  value: function () {
                                    var e = this._getStage(this.vars.currentStage),
                                    t = 0;
                                    ('photographer' === e.name && this.three.camera.isZoomin || 'town' === e.name && this.three.camera.isZoomout) && (t = this.params.motionBlur.townToPhotographer),
                                    ('iris' === e.name && this.three.camera.isZoomin || 'photographer' === e.name && this.three.camera.isZoomout) && (t = this.params.motionBlur.photographerToIris),
                                    ('earth' === e.name && this.three.camera.isZoomin || 'iris' === e.name && this.three.camera.isZoomout) && (t = this.params.motionBlur.irisToEarth),
                                    this.three.postprocessing && (this.three.postprocessing.force = t, this.three.postprocessing.enableBlurMotion())
                                  }
                                },
                                {
                                  key: '_onEndTravelingHandler',
                                  value: function () {
                                    this.three.interface.showNewCurrent(),
                                    this.three.postprocessing && this.three.postprocessing.disableBlurMotion()
                                  }
                                },
 

and

VirtualScroll.prototype._onWheel = function (e) {
    var t = this.options;
    if (!this._lethargy || !1 !== this._lethargy.check(e)) {
      var r = this._event;
      r.deltaX = e.wheelDeltaX || - 1 * e.deltaX,
      r.deltaY = e.wheelDeltaY || - 1 * e.deltaY,
      n.isFirefox && 1 == e.deltaMode && (r.deltaX *= t.firefoxMultiplier, r.deltaY *= t.firefoxMultiplier),
      r.deltaX *= t.mouseMultiplier,
      r.deltaY *= t.mouseMultiplier,
      this._notify(e)
    }
  },

[karlcow]

@wisniewskit do you have a mouse with a wheel? Could you try this?

[karlcow]

when going in

VirtualScroll.prototype._onWheel = function(e) {
  var t = this.options;
  if (!this._lethargy || !1 !== this._lethargy.check(e)) {
    var r = this._event;
    (r.deltaX = e.wheelDeltaX || -1 * e.deltaX),
      (r.deltaY = e.wheelDeltaY || -1 * e.deltaY),
      n.isFirefox &&
        1 == e.deltaMode &&
        ((r.deltaX *= t.firefoxMultiplier), (r.deltaY *= t.firefoxMultiplier)),
      (r.deltaX *= t.mouseMultiplier),
      (r.deltaY *= t.mouseMultiplier),
      this._notify(e);
  }
};

the value of t is:

{
  "mouseMultiplier": 0.5,
  "touchMultiplier": 3.5,
  "firefoxMultiplier": 20,
  "keyStep": 120,
  "preventTouch": true,
  "unpreventTouchClass": "vs-touchmove-allowed",
  "limitInertia": false,
  "useKeyboard": true
}

[wisniewskit]

In Chrome, this works because a custom "startTraveling" listener is called on scrollwheel usage in their main.js:

        }, {
            key: "_onStartTravelingHandler",
            value: function() {
                var e = this._getStage(this.vars.currentStage)
                  , t = 0;
                ("photographer" === e.name && this.three.camera.isZoomin || "town" === e.name && this.three.camera.isZoomout) && (t = this.params.motionBlur.townToPhotographer),
                ("iris" === e.name && this.three.camera.isZoomin || "photographer" === e.name && this.three.camera.isZoomout) && (t = this.params.motionBlur.photographerToIris),
                ("earth" === e.name && this.three.camera.isZoomin || "iris" === e.name && this.three.camera.isZoomout) && (t = this.params.motionBlur.irisToEarth),
                this.three.postprocessing && (this.three.postprocessing.force = t,
                this.three.postprocessing.enableBlurMotion())
            }
        }, {

According to the stack trace, it ends up there from here:

            key: "_onWheelingHandler",
            value: function(e) {
                if (!this.three.isPaused) {
                    var t = e.deltaY;
                    Math.abs(t) > this.params.wheelDelta && (this.three.camera.isTraveling || (0 < t ? this.next() : this.prev()))
                }
            }

Firefox gets there as well, but in its case e.deltaY has smaller values than this.params.wheelDelta, such as 3 instead of 50.

So this is because of our old friend, e.deltaMode being 1 (lines) while the size just presumes it must be pixels (0).

As usual they can modify the above code to check deltaMode as the standard expects them to:

            key: "_onWheelingHandler",
            value: function(e) {
                if (!this.three.isPaused) {
                    var t = getWheelDeltaInPixels(e);
                    Math.abs(t) > this.params.wheelDelta && (this.three.camera.isTraveling || (0 < t ? this.next() : this.prev()))
                }
            }

With this as the utility function:

function getWheelDeltaInPixels(e) {
  switch (e.deltaMode) {
    case WheelEvent.DOM_DELTA_PIXEL: return 1;
    case WheelEvent.DOM_DELTA_LINE:  return parseFloat(window.getComputedStyle(e.target).getPropertyValue('line-height'));
    case WheelEvent.DOM_DELTA_PAGE:  return document.scrollingElement.offsetHeight;
  }
}

Otherwise this is a dupe of bz1392460

[wisniewskit]

I just contacted the site using their form at https://www.ocus.com/en/offer

[softvision-sergiulogigan]

This is also and still happening on Windows.

Tested with:
Browser / Version: Firefox Nightly 74.0a1 (2020-01-13)
Operating System: Windows 10 Pro

[cipriansv]

After retesting the issue I confirm that the issue has been fixed.

I am able to scroll the page using the mouse wheel.

Tested with:
Browser / Version: Firefox Nightly 82.0a1 (2020-09-03)
Operating System: macOS 10.15.6

Closing the issue as fixed.