Different behavior of matter.js-animated objects in Firefox and Chrome (animation) - google-chrome

Question

I have this fairly simple physics simulation where I animate the left / right positions using matter.js. it's online, under "every.bot".
The code that does it is
const { Engine, Render, Runner, World, Bodies } = Matter;
const engine = Matter.Engine.create({enableSleeping: true});
const iconWidth = 120
// Create 3 HTML elements and add them to the canvas
const element1 = document.createElement("img");
element1.src = "IMG/icon_it.png"
element1.style.width = `${iconWidth}px`
element1.style.height = `${iconWidth}px`
element1.style.position = "absolute"
document.getElementById("canvas").appendChild(element1)
const element2 = document.createElement("img");
element2.src = "IMG/icon_webdev.png";
element2.style.width = `${iconWidth}px`
element2.style.height = `${iconWidth}px`
element2.style.position = "absolute";
document.getElementById("canvas").appendChild(element2);
const element3 = document.createElement("img");
element3.src = "IMG/icon_3d.png";
element3.style.width = `${iconWidth}px`
element3.style.height = `${iconWidth}px`
element3.style.position = "absolute";
document.getElementById("canvas").appendChild(element3);
const body = document.getElementById("body")
const base = Matter.Bodies.rectangle(body.offsetWidth, canvas.offsetHeight, body.offsetWidth*2, 6, {
isStatic: true
})
const wallL = Matter.Bodies.rectangle(0, canvas.offsetHeight, 6, body.offsetHeight, {
isStatic: true
})
const wallR = Matter.Bodies.rectangle(body.offsetWidth, canvas.offsetHeight, 6, body.offsetHeight, {
isStatic: true
})
console.log(body.offsetWidth)
// Create 3 matter.js bodies for the HTML elements and add them to the engine
const body1 = Matter.Bodies.rectangle(((canvas.offsetWidth/2)-iconWidth/2)+Math.floor(Math.random() * 241) - 120, 0, iconWidth, iconWidth);
const body2 = Matter.Bodies.rectangle(((canvas.offsetWidth/2)-iconWidth/2)+Math.floor(Math.random() * 241) - 120, 150, iconWidth, iconWidth);
const body3 = Matter.Bodies.rectangle((canvas.offsetWidth/2)-iconWidth/2, 300, iconWidth, iconWidth);
const friction = 0.9
const airFriction = 0.5
body1.friction = friction
body2.friction = friction
body3.friction = friction
body1.airFriction = airFriction
body2.airFriction = airFriction
body3.airFriction = airFriction
Matter.World.add(engine.world, [body1,body2,body3,base,wallR,wallL]);
// Run the engine
Matter.Runner.run(engine);
// Update the position of the HTML elements based on their matter.js bodies
Matter.Events.on(engine, "afterUpdate", function() {
const element1PosX = body1.position.x-iconWidth/2
const element2PosX = body2.position.x-iconWidth/2
const element3PosX = body3.position.x-iconWidth/2
const element1PosY = body1.position.y-iconWidth/2
const element2PosY = body2.position.y-iconWidth/2
const element3PosY = body3.position.y-iconWidth/2
element1.style.left = element1PosX + "px";
element1.style.top = element1PosY + "px";
element2.style.left = element2PosX + "px";
element2.style.top = element2PosY + "px";
element3.style.left = element3PosX + "px";
element3.style.top = element3PosY + "px";
});
I know I shoud DRY up this bunch, but I'm almost afraid to lose the bug that I'm about to report, which is absolutely blowing my mind:
The objects behave almost normal on Chrome in Full-HD. But when I set the Browser to fullscreen (F11), they start bouncing around after impacts, oscillating weirdly.
This in itself is strange. But what's even weirder is that the behavior on FF is the complete opposite! If I set it to fullscreen, objects behave normally. In normal mode, they bounce around like in Chrome, fullscreen mode.
I'm on PC. Have I found a glitch in the matrix? Don't tell me I need to understand the inner workings of browsers just to use a physics sim.... 🤦‍♂️