Compass fix 3

Author: morehawes

src/features/locate/button.vue

@@ -36,12 +36,7 @@ const label = computed(() => {
         :aria-pressed="mode !== null && mode !== 'error'"
         @click="cycle"
     >
-        <Icon
-            width="40"
-            height="40"
-            :fill="iconColor"
-            :name="iconName"
-        />
+        <Icon width="40" height="40" :fill="iconColor" :name="iconName" />
         <span class="locate-btn__label" :style="{ color: iconColor }">{{
             label
         }}</span>
@@ -50,7 +45,9 @@ const label = computed(() => {
     <!-- Confirmation modal — shown on first use before the browser permission prompt -->
     <Teleport to="body">
         <template v-if="showConfirmModal">
-            <div class="modal-backdrop fade show navigator-modal-backdrop"></div>
+            <div
+                class="modal-backdrop fade show navigator-modal-backdrop"
+            ></div>
             <div
                 class="modal fade show d-block navigator-modal"
                 tabindex="-1"
@@ -105,7 +102,9 @@ const label = computed(() => {
     <!-- Error modal — shown on permission denied, or when clicking the Error button -->
     <Teleport to="body">
         <template v-if="showErrorModal">
-            <div class="modal-backdrop fade show navigator-modal-backdrop"></div>
+            <div
+                class="modal-backdrop fade show navigator-modal-backdrop"
+            ></div>
             <div
                 class="modal fade show d-block navigator-modal"
                 tabindex="-1"

src/features/locate/useLocate.js

@@ -50,19 +50,30 @@ export const useLocate = () => {
 
     // ─── Map markers ─────────────────────────────────────────────────────────
 
-    const createPositionElement = () => {
+    /** Create an SVG element that references a sprite symbol via xlink:href.
+     *  Using the DOM API (not innerHTML) ensures the xlink namespace is set
+     *  correctly, which is required for <use> resolution on iOS Safari. */
+    const createSpriteIcon = (className, symbolId) => {
+        const NS = "http://www.w3.org/2000/svg";
+        const XLINK = "http://www.w3.org/1999/xlink";
         const el = document.createElement("div");
-        el.className = "navigator-locate-position";
-        el.innerHTML = `<svg width="32" height="32" fill="currentColor"><use href="#position"/></svg>`;
+        el.className = className;
+        const svg = document.createElementNS(NS, "svg");
+        svg.setAttribute("width", "32");
+        svg.setAttribute("height", "32");
+        svg.setAttribute("fill", "currentColor");
+        const use = document.createElementNS(NS, "use");
+        use.setAttributeNS(XLINK, "xlink:href", `#${symbolId}`);
+        svg.appendChild(use);
+        el.appendChild(svg);
         return el;
     };
 
-    const createHeadingElement = () => {
-        const el = document.createElement("div");
-        el.className = "navigator-locate-heading";
-        el.innerHTML = `<svg width="32" height="32" fill="currentColor"><use href="#position-heading"/></svg>`;
-        return el;
-    };
+    const createPositionElement = () =>
+        createSpriteIcon("navigator-locate-position", "position");
+
+    const createHeadingElement = () =>
+        createSpriteIcon("navigator-locate-heading", "position-heading");
 
     /**
      * Sync both markers to the current position and compass heading.

tests/e2e/features/locate.spec.js

@@ -269,6 +269,72 @@ test.describe("Locate / Error state", () => {
 // ─── Locate / Heading marker ──────────────────────────────────────────────────
 
 test.describe("Locate / Heading marker", () => {
+    test("heading marker SVG resolves the sprite symbol via xlink:href", async ({
+        page,
+    }) => {
+        await withGrantedStorage(page);
+        await grantGeolocation(page);
+        await page.goto("/");
+        await page.waitForLoadState("networkidle");
+
+        await page.locator("#locate-button").click();
+        await expect
+            .poll(() => page.locator(".navigator-locate-position").count(), {
+                timeout: 5000,
+            })
+            .toBeGreaterThan(0);
+
+        // Fire an orientation event so the heading marker appears
+        await page.evaluate(() => {
+            const event = new DeviceOrientationEvent(
+                "deviceorientationabsolute",
+                { alpha: 0, beta: 0, gamma: 0, absolute: true },
+            );
+            window.dispatchEvent(event);
+        });
+
+        const headingEl = page.locator(".navigator-locate-heading");
+        await expect
+            .poll(() => headingEl.count(), { timeout: 3000 })
+            .toBeGreaterThan(0);
+
+        // Verify the <use> element uses xlink:href (not plain href) and
+        // references the correct sprite symbol.
+        const useInfo = await headingEl.evaluate((el) => {
+            const use = el.querySelector("use");
+            if (!use) return { found: false };
+            return {
+                found: true,
+                xlinkHref: use.getAttributeNS(
+                    "http://www.w3.org/1999/xlink",
+                    "href",
+                ),
+                plainHref: use.getAttribute("href"),
+            };
+        });
+
+        expect(useInfo.found).toBe(true);
+        expect(useInfo.xlinkHref).toBe("#position-heading");
+
+        // Also verify the position marker uses xlink:href
+        const posUseInfo = await page
+            .locator(".navigator-locate-position")
+            .evaluate((el) => {
+                const use = el.querySelector("use");
+                if (!use) return { found: false };
+                return {
+                    found: true,
+                    xlinkHref: use.getAttributeNS(
+                        "http://www.w3.org/1999/xlink",
+                        "href",
+                    ),
+                };
+            });
+
+        expect(posUseInfo.found).toBe(true);
+        expect(posUseInfo.xlinkHref).toBe("#position");
+    });
+
     test("compass heading uses webkitCompassHeading when available (iOS)", async ({
         page,
     }) => {