canastack-admin
/
sw-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix: Prevent browser zoom on map - only map zoom should work 

- Add user-scalable=no to viewport meta
- Add touch-action: none to map containers and markers
- Prevents pinch-zoom triggering browser zoom instead of map zoom

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Your Name 2026-01-26 02:09:24 +00:00
parent afd620da68
commit 7c09a62170
3 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="description" content="SocioWire maps local news, events, deals, and social posts in real time. Explore what’s happening around you." />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://sociowire.com/" />

10
src/styles/map.css
View File

@ -15,6 +15,7 @@
width:100%;
height: clamp(500px, 87.5vh, 1100px);
overflow: hidden;
touch-action: none; /* Prevent browser zoom - map handles its own gestures */
}
.map-stage--placeholder{
@ -127,6 +128,15 @@
inset:0;
width:100%;
height:100%;
touch-action: none; /* Prevent browser zoom */
}
/* Prevent browser zoom on all map markers and overlays */
.maplibregl-marker,
.maplibregl-popup,
.maplibregl-canvas-container,
.maplibregl-canvas {
touch-action: none;
}
.map-status{

4
src/styles/mapMarkers.css
View File

@ -10,8 +10,9 @@
height: 0;
pointer-events: none;
transform: translate3d(0, 0, 0);
touch-action: none; /* Prevent browser zoom - let map handle gestures */
}
.post-pin * { pointer-events: auto; box-sizing: border-box; }
.post-pin * { pointer-events: auto; box-sizing: border-box; touch-action: none; }
.post-pin--compact .post-pin-bubble {
position: absolute;
@ -52,6 +53,7 @@
transform: translate(-50%, calc(-100% - 12px)) scale(0.58) rotate(var(--card-tilt));
transform-origin: bottom center;
will-change: transform;
touch-action: none; /* Prevent browser zoom */
}
@media (max-width: 640px){