switch from css zoom to transform-scale

server/scripts/modules/navigation.mjs

@@ -274,9 +274,9 @@ const resize = () => {
 
 	const scale = Math.min(widthZoomPercent, heightZoomPercent);
 	if (scale < 1.0 || document.fullscreenElement) {
-		document.querySelector('#container').style.zoom = scale;
+		document.querySelector('#container').style.transform = `scale(${scale})`;
 	} else {
-		document.querySelector('#container').style.zoom = 1;
+		document.querySelector('#container').style.transform = 'unset';
 	}
 };
 

server/scripts/modules/regionalforecast.mjs

@@ -167,9 +167,7 @@ class RegionalForecast extends WeatherDisplay {
 		// draw the map
 		const scale = 640 / (offsetXY.x * 2);
 		const map = this.elem.querySelector('.map');
-		map.style.zoom = scale;
-		map.style.top = `-${sourceXY.y}px`;
-		map.style.left = `-${sourceXY.x}px`;
+		map.style.transform = `scale(${scale}) translate(-${sourceXY.x}px, -${sourceXY.y}px)`;
 
 		const cities = data.map((city) => {
 			const fill = {};

server/styles/scss/_page.scss

@@ -95,8 +95,9 @@ body {
 		}
 	}
 
-	
+
 }
+
 .autocomplete-suggestions {
 	background-color: #ffffff;
 	border: 1px solid #000000;
@@ -284,6 +285,7 @@ body {
 	height: 480px;
 	overflow: hidden;
 	background-image: url(../images/BackGround1_1.png);
+	transform-origin: 0 0;
 
 }
 
@@ -291,6 +293,7 @@ body {
 	background-image: none;
 	width: unset;
 	height: unset;
+	transform-origin: unset;
 }
 
 #loading {
@@ -373,7 +376,7 @@ body {
 }
 
 #divTwcBottom img {
-	zoom: 75%;
+	transform: scale(0.75);
 }
 
 #divTwc:fullscreen {

server/styles/scss/_regional-forecast.scss

@@ -12,6 +12,7 @@
 
 	.map {
 		position: absolute;
+		transform-origin: 0 0;
 	}
 
 	.location {