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="http://www.w3.org/1999/xhtml">
<head>
<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>
</head>
<body>
<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-->
</main>
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
<!-- CORRECT -->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/babylonjs/5.13.0/babylon.min.js"></script>-->
<!-- BROKEN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babylonjs/5.13.1/babylon.min.js"></script>
<script>
window.addEventListener("DOMContentLoaded", async () => {
const canvas = document.getElementById('renderCanvas');
console.log(canvas);
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);
camera.setTarget(BABYLON.Vector3.Zero());
camera.attachControl(canvas);
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 () {
scene.render();
});
});
</script>
</body>
</html>