sync: 2026-08-21 20:56:20

templates/index.html

@@ -700,8 +700,10 @@
             font-size: 15px;
             cursor: pointer;
             /* No transform transitions — they fight MapLibre's
-               per-frame camera updates and cause wobble. */
-            will-change: transform;
+               per-frame camera updates and cause wobble.
+               Avoid will-change here: promoting every marker
+               to its own GPU layer exhausts mobile VRAM and
+               kills all animations. */
         }
 
         .poi-dot:hover {
@@ -723,8 +725,8 @@
         }
 
         @keyframes loc-pulse {
-            0%   { transform: scale(1);   opacity: 0.6; }
-            100% { transform: scale(2.8); opacity: 0;   }
+            0%   { transform: scale(1) translateZ(0);   opacity: 0.6; }
+            100% { transform: scale(2.8) translateZ(0); opacity: 0;   }
         }
 
         .user-loc-dot {
@@ -753,6 +755,11 @@
 
             border: 2px solid rgba(26, 115, 232, 0.5);
 
+            /* Force GPU compositing so the pulse survives
+               alongside MapLibre's WebGL canvas on mobile. */
+            -webkit-transform: translateZ(0);
+            transform: translateZ(0);
+            -webkit-animation: loc-pulse 2s ease-out infinite;
             animation: loc-pulse 2s ease-out infinite;
         }
 
@@ -770,6 +777,9 @@
                     rgba(26, 115, 232, 0.20) 0%,
                     rgba(26, 115, 232, 0) 70%
                 );
+
+            -webkit-transform: translateZ(0);
+            transform: translateZ(0);
         }
 
 
@@ -813,6 +823,28 @@
                 max-height: 60vh;
             }
 
+            /* Reduce visual complexity on mobile so the GPU
+               has headroom for MapLibre's flyTo / fitBounds
+               camera animations. */
+            .poi-dot {
+                box-shadow:
+                    0 2px 6px rgba(0,0,0,0.30),
+                    inset 0 -1px 3px rgba(0,0,0,0.12);
+            }
+
+            .poi-dot:hover {
+                box-shadow:
+                    0 2px 6px rgba(0,0,0,0.30),
+                    inset 0 -1px 3px rgba(0,0,0,0.12);
+            }
+
+            .poi-dot.selected {
+                box-shadow:
+                    0 0 0 4px rgba(26,115,232,0.25),
+                    0 2px 8px rgba(0,0,0,0.35),
+                    inset 0 -1px 3px rgba(0,0,0,0.12);
+            }
+
         }
     </style>
 </head>