2057149 - www.patreon.com - The page barely scrolls when using the mouse wheel

Status: ASSIGNED

(Web Compatibility :: Site Reports, defect, P2)

Description

[Calin Tanase]

Environment:
Operating system: Windows 10
Firefox version: Firefox 152.0/155

Steps to reproduce:

1. Go to https://www.patreon.com/it-IT
2. Scroll the page using the mouse wheel.

Expected Behavior:
Page scrolls normally.

Actual Behavior:
Page barely scrolls.

Notes:

• Reproduces regardless of the status of ETP
• Reproduces in firefox-nightly, and firefox-release
• Does not reproduce in chrome

Created from https://github.com/webcompat/web-bugs/issues/228677

Comment 1

[Calin Tanase]

Attachment: patreon FF vs Chrome.mp4

Comment 2

[Hsin-Yi Tsai (she/her) [:hsinyi]]

I used this probe addEventListener("wheel", e => console.log("mode=", e.deltaMode, "deltaY=", e.deltaY, "prevented=", e.defaultPrevented), false); and the results on Chrome and Firefox seem to point to a site-side deltaMode bug (not a Firefox scroll defect).

Firefox: deltaMode=1 (DOM_DELTA_LINE), deltaY=6, prevented=true → barely scrolls
Chrome: deltaMode=0 (DOM_DELTA_PIXEL), deltaY=100, prevented=true → normal

(I didn't look into the site code).

Comment 3

[Kagami Rosylight 🏳️‍🌈🏳️‍⚧️ [:saschanaz] (they/them)]

Touching deltaMode changes the behavior.

There are multiple independent wheel event listeners somehow and one checks deltaMode and the other does not:

https://www.patreon.com/_marketing_assets/assets/js/app.1782246497767.js

      function scroll(e) {
        let element = document.elementFromPoint(
          Math.clamp(Mouse.x, 0, Stage.width),
          Math.clamp(Mouse.y, 0, Stage.height)
        );
        if (element && checkIfProhibited(element)) return;
        if (_params.lockMouseX && Mouse.x > Stage.width) return;
        if (!_this.enabled) return;
        if (!checkBounds(e)) return;
        if (
          _this.object &&
          _this.limit &&
          e.preventDefault &&
          e.preventDefault(),
          !_this.mouseWheel
        ) return;
        stopInertia();
        let newDelta = 0;
        _axes.forEach(
          (
            axis => {
              let delta = 'delta' + axis.toUpperCase();
              if ('mac' == Device.system.os) {
                if ('firefox' == Device.system.browser) return 1 === e.deltaMode ? (
                  _scrollTarget[axis] += 4 * e[delta],
                  _scrollInertia[axis] = 4 * e[delta],
                  _this.isInertia = !0,
                  void (newDelta = _scrollInertia[axis])
                ) : void (_scrollTarget[axis] += e[delta]);
                if (Device.system.browser.includes(['chrome',
                'safari'])) return _scrollTarget[axis] += 0.33 * e[delta],
                _scrollInertia[axis] = 0.33 * e[delta],
                _this.isInertia = !0,
                void (newDelta = _scrollInertia[axis])
              }
              if ('windows' == Device.system.os) {
                if ('firefox' == Device.system.browser && 1 === e.deltaMode) return _scrollTarget[axis] += 10 * e[delta],
                _scrollInertia[axis] = 10 * e[delta],
                _this.isInertia = !0,
                void (newDelta = _scrollInertia[axis]);
                if (Device.system.browser.includes(['chrome'])) {
                  let s = 0.25;
                  return _scrollTarget[axis] += e[delta] * s,
                  _scrollInertia[axis] = e[delta] * s,
                  _this.isInertia = !0,
                  void (newDelta = _scrollInertia[axis])
                }
                if ('ie' == Device.system.browser) return _scrollTarget[axis] += e[delta],
                _scrollInertia[axis] = e[delta],
                _this.isInertia = !0,
                void (newDelta = _scrollInertia[axis])
              }
              _scrollTarget[axis] += e[delta],
              newDelta = _scrollInertia[axis]
            }
          )
        ),

          this.onWheel = t => {
            let {
              deltaX: _,
              deltaY: R
            }
            = t;
            this.normalizeWheel &&
            (_ = lenis_modern_i( - 100, _, 100), R = lenis_modern_i( - 100, R, 100)),
            _ *= this.wheelMultiplier,
            R *= this.wheelMultiplier,
            this.emitter.emit('scroll', {
              type: 'wheel',
              deltaX: _,
              deltaY: R,
              event: t
            })
          },

If I set dom.event.wheel-deltaMode-lines.always-disabled=true then the site behaves well.

Comment 4

[Kagami Rosylight 🏳️‍🌈🏳️‍⚧️ [:saschanaz] (they/them)]

Perhaps we can have some site-list pref to force Patreon use pixel mode? Thoughts?

Comment 5

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)(PTO: 9/19-9/27)]

if ('firefox' == Device.system.browser && 1 === e.deltaMode) return _scrollTarget[axis] += 10 * e[delta],

Hmm, they check deltaMode, but they fail to consider the scroll amount?

(In reply to Kagami Rosylight 🏳️‍🌈🏳️‍⚧️ [:saschanaz] (they/them) from comment #4)

Perhaps we can have some site-list pref to force Patreon use pixel mode? Thoughts?

Yeah, we could, but looks like they just have a bug. Treating the delta value with multiplying the line height pixels should work... I don't understand why they use different path after checking the deltaMode.

Oh, but...

          this.onWheel = t => {
            let {
              deltaX: _,
              deltaY: R
            }
            = t;

Why does not delatMode lock to pixels??

Comment 6

[Randell Jesup [:jesup] (needinfo me)]

I made an attempt to contact them via security@ (the only email address I could find chatting with their bot).

Comment 7

[Thomas Wisniewski [:twisniewski]]

Attachment: Bug 2057149 - add a JS webcompat intervention for patreon.com; r?skyschub

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/94f998543c3d
https://hg.mozilla.org/integration/autoland/rev/5ebc3adf585a
add a JS webcompat intervention for patreon.com; r=skyschub,webcompat-reviewers

Comment 9

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/5ebc3adf585a

Comment 10

[Bernadett Farkas]

Attachment: Scroll issue Nightly vs Chrome

The page scroll behavior has changed. A single scroll action now causes the page to jump directly to the bottom. Tested on Firefox Nightly 158.0a1(2026-09-16)/Firefox Release 156.0 (64-bit)