Why always 20%?

[lystormenvoy]

When I zoom out using the ctrl + mouse wheel, why does it always immediately jump to 20%? Is this a bug or intentional design?

[bobsingor]

This is certainly not how it supposed to work. @lystormenvoy can you tell me more? What device are you using? what browser? what type of mouse? I don't experience that bug and would like to investigate why this is happening.

[simon1uo]

This is certainly not how it supposed to work. @lystormenvoy can you tell me more? What device are you using? what browser? what type of mouse? I don't experience that bug and would like to investigate why this is happening.

I encounterd the same problem as I tried the demo: https://app.embedpdf.com/, it occurs when the scale was set smaller ( ctrl + wheel down not clicking the “-” button on the toolbar) every time , and I'm on Windows + Google Chrome 143

[simon1uo]

[lystormenvoy]

This is certainly not how it supposed to work. @lystormenvoy can you tell me more? What device are you using? what browser? what type of mouse? I don't experience that bug and would like to investigate why this is happening.

https://app.embedpdf.com/ on live demo with Chrome Dev. Windows 11 and the mouse is Steelseries RIVAL5

[lystormenvoy]

204% will jump to 20%
256% will jump to 26%
256% to 26%
320% to 32%
408% to 41%
640% to 64%
1024% to 102%
...

[lystormenvoy]

I think the problem is cause by:

const handleWheel = (e: WheelEvent) => {
    if (!e.ctrlKey && !e.metaKey) return;
    e.preventDefault();

    if (wheelZoomTimeout === null) {
      initialZoom = getState().currentZoomLevel;
      accumulatedWheelScale = 1;
      initializeGestureState(e.clientX, e.clientY);
    } else {
      clearTimeout(wheelZoomTimeout);
    }
   
    // the deltaY always = 100 then zoomFator always =0, so the accumulatedWheelScale always = 0.1
    // the deltaY always = 100 then zoomFator always =0, so the accumulatedWheelScale always = 0.1
    // the deltaY always = 100 then zoomFator always =0, so the accumulatedWheelScale always = 0.1

    const zoomFactor = 1 - e.deltaY * 0.01;
    accumulatedWheelScale *= zoomFactor;
    accumulatedWheelScale = Math.max(0.1, Math.min(10, accumulatedWheelScale));
    updateTransform(accumulatedWheelScale);

    wheelZoomTimeout = setTimeout(() => {
      wheelZoomTimeout = null;
      commitZoom();
      accumulatedWheelScale = 1;
    }, 150);
  };

then updateTransform update the currentScale = 0.1

// in handleWheel  it call updateTransform(0.1); so the currentScale will be update to 0.1
// in handleWheel  it call updateTransform(0.1); so the currentScale will be update to 0.1
// in handleWheel  it call updateTransform(0.1); so the currentScale will be update to 0.1

 const updateTransform = (scale: number) => {
    currentScale = scale;
    const { tx, ty } = calculateTransform(scale);
    element.style.transformOrigin = '0 0';
    element.style.transform = `translate(${tx}px, ${ty}px) scale(${scale})`;
  };

so the delta in commitZoom is not right.

const commitZoom = () => {
    const { tx, finalWidth } = calculateTransform(currentScale);
    const delta = (currentScale - 1) * initialZoom;

    let anchorX: number;
    let anchorY: number = pointerContainerY;

    if (finalWidth <= layoutWidth) {
      anchorX = layoutCenterX;
    } else {
      const scaleDiff = 1 - currentScale;
      anchorX =
        Math.abs(scaleDiff) > 0.001 ? initialElementLeft + tx / scaleDiff : pointerContainerX;
    }

    zoomScope.requestZoomBy(delta, { vx: anchorX, vy: anchorY });
    resetTransform();
    initialZoom = 0;
  };

then the target will always be 0.2

[lystormenvoy]

I think the problem is cause by:

const handleWheel = (e: WheelEvent) => {
    if (!e.ctrlKey && !e.metaKey) return;
    e.preventDefault();

    if (wheelZoomTimeout === null) {
      initialZoom = getState().currentZoomLevel;
      accumulatedWheelScale = 1;
      initializeGestureState(e.clientX, e.clientY);
    } else {
      clearTimeout(wheelZoomTimeout);
    }
   
   // the deltaY always = 100 then zoomFator always =0, so the accumulatedWheelScale always = 0.1
    const zoomFactor = 1 - e.deltaY * 0.01;
    accumulatedWheelScale *= zoomFactor;
    accumulatedWheelScale = Math.max(0.1, Math.min(10, accumulatedWheelScale));
    updateTransform(accumulatedWheelScale);

    wheelZoomTimeout = setTimeout(() => {
      wheelZoomTimeout = null;
      commitZoom();
      accumulatedWheelScale = 1;
    }, 150);
  };

then updateTransform update the currentScale = 0.1

// in handleWheel  it call updateTransform(0.1); so the currentScale will be update to 0.1
 const updateTransform = (scale: number) => {
    currentScale = scale;
    const { tx, ty } = calculateTransform(scale);
    element.style.transformOrigin = '0 0';
    element.style.transform = `translate(${tx}px, ${ty}px) scale(${scale})`;
  };

so the delta in commitZoom is not right.

const commitZoom = () => {
    const { tx, finalWidth } = calculateTransform(currentScale);
    const delta = (currentScale - 1) * initialZoom;

    let anchorX: number;
    let anchorY: number = pointerContainerY;

    if (finalWidth <= layoutWidth) {
      anchorX = layoutCenterX;
    } else {
      const scaleDiff = 1 - currentScale;
      anchorX =
        Math.abs(scaleDiff) > 0.001 ? initialElementLeft + tx / scaleDiff : pointerContainerX;
    }

    zoomScope.requestZoomBy(delta, { vx: anchorX, vy: anchorY });
    resetTransform();
    initialZoom = 0;
  };

then the target will always be 0.2

@bobsingor @simon1uo

[mitchjb-sos]

I ran into the same issue, adding my upvote 👍

[lystormenvoy]

any update?

[klaas0]

I have the same issue with FireFox and Chrome on Windows 11. On https://app.embedpdf.com/ and also on my own website where I use EmbedPDF.

Pinch to zoom (zooming on mobile device) works perfectly tho.

[mitchjb-sos]

@bobsingor can this be reviewed? #596