1856775 - Embedded panorama viewer zooms in and out when scrolling page

Status: NEW

(Core :: DOM: Events, defect)

Description

[Gregory Pappas [:gregp]]

Attachment: scrolling_bug.webm

Steps to reproduce:

1. Navigate to https://www.dabble.so/
2. Position your cursor at the middle of the page
3. Scroll to the bottom of the page

Actual results:
Panorama viewer zooms in and out as you scroll the page

Expected results:
Panorama viewer does not zoom in and out as you scroll the page

Comment 1

[Alice0775 White]

Seems to be related to the transaction processing of the mouse wheel event.

Comment 2

[Timothy Nikkel (:tnikkel)]

Chrome and Safari seem to have the same behaviour.

Comment 3

[Gregory Pappas [:gregp]]

Chrome and Safari seem to have the same behaviour.

Can you elaborate more on what behavior you're seeing?

When I tested a touchpad on Linux, the panorama viewer did not zoom when scrolling in Chromium.

Comment 4

[Timothy Nikkel (:tnikkel)]

The panorama viewer zoomed when I scrolled down on the touchpad on macos. And it seemed about the same in all three browsers.

I'll be scrolling down the page, and when my mouse cursor is over the panorama scrolling no longer happens, but zooming of the panorama happens.

Comment 5

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

The <div class="pnlm-ui pnlm-grab"> has DOMMouseScroll event listener:

    function V(a) {
      G &&
      ('fullscreenonly' != b.mouseZoom || za) &&
      (
        a.preventDefault(),
        s(),
        O = Date.now(),
        a.wheelDeltaY ? (x(b.hfov - 0.05 * a.wheelDeltaY), w.hfov = 0 > a.wheelDelta ? 1 : - 1) : a.wheelDelta ? (x(b.hfov - 0.05 * a.wheelDelta), w.hfov = 0 > a.wheelDelta ? 1 : - 1) : a.detail &&
        (x(b.hfov + 1.5 * a.detail), w.hfov = 0 < a.detail ? 1 : - 1),
        F()
      )
    }

Looks like consuming wheel scroll on it is expected.

Comment 6

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

(In reply to Gregory Pappas [:gregp] from comment #3)

Chrome and Safari seem to have the same behaviour.

Can you elaborate more on what behavior you're seeing?

When I tested a touchpad on Linux, the panorama viewer did not zoom when scrolling in Chromium.

The child of the <div>, <div class="pnlm-dragfix"> has touchstart, touchmove and touchend event listeners and they may consume the touch events:

    function Ia(a) {
      if (G && b.draggable) {
        s();
        Ba();
        b.roll = 0;
        w.hfov = 0;
        var h = Q(a.targetTouches[0]);
        wa = h.x;
        xa = h.y;
        if (2 == a.targetTouches.length) {
          var v = Q(a.targetTouches[1]);
          wa += 0.5 * (v.x - h.x);
          xa += 0.5 * (v.y - h.y);
          Fa = Math.sqrt((h.x - v.x) * (h.x - v.x) + (h.y - v.y) * (h.y - v.y))
        }
        ia = !0;
        O = Date.now();
        Ma = b.yaw;
        Na = b.pitch;
        C('touchstart', a);
        F()
      }
    }

    function la(a) {
      if (b.draggable && (a.preventDefault(), G && (O = Date.now()), ia && G)) {
        var h = Q(a.targetTouches[0]),
        v = h.x,
        c = h.y;
        2 == a.targetTouches.length &&
        - 1 != Fa &&
        (
          a = Q(a.targetTouches[1]),
          v += 0.5 * (a.x - h.x),
          c += 0.5 * (a.y - h.y),
          h = Math.sqrt((h.x - a.x) * (h.x - a.x) + (h.y - a.y) * (h.y - a.y)),
          x(b.hfov + 0.1 * (Fa - h)),
          Fa = h
        );
        h = b.hfov / 360 * b.touchPanSpeedCoeffFactor;
        v = (wa - v) * h + Ma;
        w.yaw = (v - b.yaw) % 360 * 0.2;
        b.yaw = v;
        c = (c - xa) * h + Na;
        w.pitch = 0.2 * (c - b.pitch);
        b.pitch = c
      }
    }

So, it could cause different behavior on Linux (I'm not sure what's b there).

Comment 7

[Alice0775 White]

I can reproduce the issue on Nightly120.0a1 Windows10, but not on Chrome119.

In Nightly120.0a1, If the mouse wheel is continuously rotated on a page, the page scrolls, but the scrolling stops as soon as the mouse pointer reaches the image in question.

In Chrome119, on the other hand, the page continues to scroll even when the mouse pointer is over the image as expected. This is consistent with the scenario where there is a scrollable Iframe element on the page, and when the mouse wheel is continuously rotated on the parent page, if the mouse pointer comes to the iframe and the wheel event fires on the iframe within a certain threshold, the iframe will not scroll but the parent page will continue to scroll.

Of course, in both browser, if you move the mouse pointer over the image and rotate the mouse wheel, the image will zoom in and out as expected.

Comment 8

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

Ah, maybe, dlrobertson is a good person to ask.

Comment 9

[Dan Robertson (:dlrobertson)]

Woah, this is like the old bugs we used to get before wheel event transactions landed. Yeah this seems like the same thing, but with touchstart, touchmove, and touchend... Perhaps touch events and mouse events should also have transactions so that they also have the same target as they did at the start of the scroll?