Openstatus
www.openstatus.dev
fix: background scaling issue
+12
-6
+12
-6
apps/web/src/app/components/background.tsx
+12
-6
apps/web/src/app/components/background.tsx
···
8
8
}) {
9
9
React.useEffect(() => {
10
10
function mouseMoveEvent(e: MouseEvent) {
11
-
const body = document.body;
11
+
const scale = window.visualViewport.scale;
12
+
// disable mouse movement on viewport zoom - causes page to slow down
13
+
if (scale === 1) {
14
+
const body = document.body;
12
15
13
-
const targetX = e.clientX;
14
-
const targetY = e.clientY;
16
+
const targetX = e.clientX;
17
+
const targetY = e.clientY;
15
18
16
-
body.style.setProperty("--x", `${targetX}px`);
17
-
body.style.setProperty("--y", `${targetY}px`);
19
+
body.style.setProperty("--x", `${targetX}px`);
20
+
body.style.setProperty("--y", `${targetY}px`);
21
+
}
18
22
}
19
23
20
24
document.addEventListener("mousemove", mouseMoveEvent);
21
-
return () => document.removeEventListener("mousemove", mouseMoveEvent);
25
+
return () => {
26
+
document.removeEventListener("mousemove", mouseMoveEvent);
27
+
};
22
28
}, []);
23
29
24
30
return (