Camera zoom scrolling the page (introduced in 5.13.1)

We’ve encountered an issue where scrolling the camera with the mouse wheel also scrolls the page while the canvas is in focus. We backtracked the releases and found that it was introduced in 5.13.1 (5.13.0 works correctly).

Here is an example web page that we put together that shows the problem:

<!DOCTYPE html>
<html xmlns="">

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Dummy Site</title>

  <main id="parentCanvas">
    <div style="width: 500px; background-color: red; height: 1000px"></div>
    <canvas id="renderCanvas" touch-action="none"></canvas>
    <div style="width: 500px; background-color: green; height: 1000px"></div>
    <!--touch-action="none" for best results from PEP-->
  <script src=""></script>
  <!-- CORRECT -->
  <!--<script src=""></script>-->
  <!-- BROKEN -->
  <script src=""></script>
    window.addEventListener("DOMContentLoaded", async () => {
      const canvas = document.getElementById('renderCanvas');
      const engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true });
      const scene = new BABYLON.Scene(engine);

      const camera = new BABYLON.ArcRotateCamera("camera1", 0, 1, 7, new BABYLON.Vector3(0, 0, 0), scene);

      const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
      light.intensity = 0.7;

      const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, segments: 32}, scene);
      sphere.position.y = 1;
      const ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);

      engine.runRenderLoop(function () {


cc @PolygonalSun (he will be back from vacation very soon :))

1 Like

This is most probably linked to our effort to stop the warning about passive events.

Thanks for the repro btw!

1 Like

Probably this one: DeviceInputSystem: Fixed Passive Support Check to prevent Violation Warning by PolygonalSun · Pull Request #12696 · BabylonJS/Babylon.js (

@PolygonalSun: I wonder if we have to set the wheel to passive. It seems it has to stay not passive

1 Like

It should be easy enough to set to non-passive. My initial understanding was that wheel events should be passive but if there are scenarios where they need to be non-passive, then I can make the change real quick to swap that over. I’ll update when that change is in PR.

1 Like

Doing some digging around Element: wheel event - Web APIs | MDN it seems that we would want passive to be set to false, as that will allow preventDefault to work as intended, which will stop the event from propagating and cause scrolling on the webpage. A normal use case would most likely keep it at true (the default), as they would just be listening for the event, but still want the web page to scroll.

I’ve created a PR to just set the default value for passive to be false (where supported): DeviceInputSystem: Made mousewheel passive option set to false when supported by PolygonalSun · Pull Request #12761 · BabylonJS/Babylon.js (


PR is merged