Keep the rounded clip above the canvas: clipping Mapbox's canvas broke rendering
Some checks are pending
Deploy to GitHub Pages / build (push) Waiting to run
Deploy to GitHub Pages / deploy (push) Blocked by required conditions

This commit is contained in:
swift-river542 2026-09-17 02:11:49 -05:00
parent 11916ffb9c
commit 84bd691a91
14 changed files with 23 additions and 27 deletions

View file

@ -345,9 +345,9 @@ useShadowStyles(`
only once the engine builds a mask layer for it, so on a real GPU the corners go square the
moment the map finishes loading. clip-path clips at paint time regardless of compositing,
so the rounding holds before and after the canvas appears. */
.rm-map-area, .rm-map-canvas,
.rm-map-canvas .mapboxgl-canvas-container, .rm-map-canvas .maplibregl-canvas-container,
.rm-map-canvas canvas { clip-path: inset(0 round var(--map-radius-corners, var(--map-radius, 0px))); }
/* Clip the map AREA only. Clipping the canvas or its container breaks Mapbox's own
transforms and the map renders grey, so the rounding stops one level above it. */
.rm-map-area { clip-path: inset(0 round var(--map-radius-corners, var(--map-radius, 0px))); }
.rm-map-canvas { position:absolute;inset:0; }
.rm-loading { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0f1216;color:#7c8cf8;font:13px -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;z-index:5; }
/* Failure state, NOT a cover: modelled on cities-internet's .gm-err so anything the

View file

@ -63,9 +63,9 @@ useShadowStyles(`
only once the engine builds a mask layer for it, so on a real GPU the corners go square the
moment the map finishes loading. clip-path clips at paint time regardless of compositing,
so the rounding holds before and after the canvas appears. */
.dsm-map-area, .dsm-map-canvas,
.dsm-map-canvas .mapboxgl-canvas-container, .dsm-map-canvas .maplibregl-canvas-container,
.dsm-map-canvas canvas { clip-path: inset(0 round var(--map-radius-corners, var(--map-radius, 0px))); }
/* Clip the map AREA only. Clipping the canvas or its container breaks Mapbox's own
transforms and the map renders grey, so the rounding stops one level above it. */
.dsm-map-area { clip-path: inset(0 round var(--map-radius-corners, var(--map-radius, 0px))); }
.dsm-map-canvas { position:absolute;inset:0; }
.dsm-loading { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0f1216;color:#7c8cf8;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14px;z-index:5; } /* dark like the research map's cover: the basemap under it is night from frame one, so a light cover was the only "flash" left */
/* Failure state, NOT a cover: modelled on cities-internet's .gm-err so anything the

View file

@ -1346,9 +1346,7 @@
.rm-root, .rm-map-area, .rm-map-canvas,
.rm-map-canvas .mapboxgl-canvas-container, .rm-map-canvas .mapboxgl-canvas,
.rm-map-canvas .maplibregl-canvas-container, .rm-map-canvas .maplibregl-canvas { border-radius: var(--map-radius-corners, var(--map-radius, 0px)); }
.rm-map-area, .rm-map-canvas,
.rm-map-canvas .mapboxgl-canvas-container, .rm-map-canvas .maplibregl-canvas-container,
.rm-map-canvas canvas { clip-path: inset(0 round var(--map-radius-corners, var(--map-radius, 0px))); }
.rm-map-area { clip-path: inset(0 round var(--map-radius-corners, var(--map-radius, 0px))); }
.rm-map-canvas { position:absolute;inset:0; }
.rm-loading { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0f1216;color:#7c8cf8;font:13px -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;z-index:5; }
.rm-error { position:absolute;top:50%;left:12px;right:12px;z-index:7;transform:translateY(-50%);text-align:center;font:13px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#fecaca;background:rgba(15,18,22,.95);border:1px solid rgba(254,202,202,.28);border-radius:10px;padding:12px 14px;box-shadow:0 2px 10px rgba(0,0,0,.4); }

View file

@ -130,7 +130,7 @@ header.top .sub { margin-top: 3px; font: 12px/1.4 var(--sans); color: var(--mut)
<script>window.FORGE = {"mode":"built","scope":"bundle","manifestUrl":"../manifest.json","bundle":"doxa-research-map","hrefBase":"../"};
/* file:// contract: manifest inlined at build — no fetch needed to render. */
window.FORGE.manifest = {"schema":"doxa-maps-manifest@1","generatedFrom":"app-profiles/*/*.vue","embedBase":".","bundleCount":10,"profileCount":19,"bundles":[{"bundle":"doxa-research-map","scriptUrl":"./doxa-research-map/doxa-research-map.js","output":"doxa-maps/doxa-research-map/doxa-research-map.js","integrity":"sha384-dMUEdQvFvBb+sHwd2W9nMNUDINTYqnXj1C/dmMz/MYE40J4jvb9YGuEZgqexJozd","elements":["doxa-research-map"],"profiles":[{"profile":"research-map","file":"research-map.vue","description":"","element":"doxa-research-map","iframeUrl":"./doxa-research-map/research-map/index.html","scriptUrl":"./doxa-research-map/doxa-research-map.js","embed":{"iframe":"\u003ciframe src=\"./doxa-research-map/research-map/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen>\u003c/iframe>","script":"\u003cscript src=\"./doxa-research-map/doxa-research-map.js\" integrity=\"sha384-dMUEdQvFvBb+sHwd2W9nMNUDINTYqnXj1C/dmMz/MYE40J4jvb9YGuEZgqexJozd\" crossorigin=\"anonymous\">\u003c/script>\n\u003cdoxa-research-map profile-config='{\"profile\":\"research-map\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\"}'>\u003c/doxa-research-map>"}}]}]};</script>
window.FORGE.manifest = {"schema":"doxa-maps-manifest@1","generatedFrom":"app-profiles/*/*.vue","embedBase":".","bundleCount":10,"profileCount":19,"bundles":[{"bundle":"doxa-research-map","scriptUrl":"./doxa-research-map/doxa-research-map.js","output":"doxa-maps/doxa-research-map/doxa-research-map.js","integrity":"sha384-47YL9pp+xscOoe3DTvaguzmwEiI1Gpj08xae7w68vUqwBeUXpgrmzGG8+4u+YyJK","elements":["doxa-research-map"],"profiles":[{"profile":"research-map","file":"research-map.vue","description":"","element":"doxa-research-map","iframeUrl":"./doxa-research-map/research-map/index.html","scriptUrl":"./doxa-research-map/doxa-research-map.js","embed":{"iframe":"\u003ciframe src=\"./doxa-research-map/research-map/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen>\u003c/iframe>","script":"\u003cscript src=\"./doxa-research-map/doxa-research-map.js\" integrity=\"sha384-47YL9pp+xscOoe3DTvaguzmwEiI1Gpj08xae7w68vUqwBeUXpgrmzGG8+4u+YyJK\" crossorigin=\"anonymous\">\u003c/script>\n\u003cdoxa-research-map profile-config='{\"profile\":\"research-map\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\"}'>\u003c/doxa-research-map>"}}]}]};</script>
<script>/**
* staging-forge.js — the ONE-PAGE semantic staging environment (root + bundle pages).
*

View file

@ -29,7 +29,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <doxa-research-map> custom element. -->
<script src="../doxa-research-map.js" integrity="sha384-dMUEdQvFvBb+sHwd2W9nMNUDINTYqnXj1C/dmMz/MYE40J4jvb9YGuEZgqexJozd" crossorigin="anonymous"></script>
<script src="../doxa-research-map.js" integrity="sha384-47YL9pp+xscOoe3DTvaguzmwEiI1Gpj08xae7w68vUqwBeUXpgrmzGG8+4u+YyJK" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

File diff suppressed because one or more lines are too long

View file

@ -29,7 +29,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <doxa-map> custom element. -->
<script src="../../doxa-simple-map.js" integrity="sha384-+8dz59bHJ1Bmu3eDCPVr22QrFPyRqBY+TdryhrL2JPvYSD0NNIskDN0WwP7NFmEn" crossorigin="anonymous"></script>
<script src="../../doxa-simple-map.js" integrity="sha384-t7ODT95QaJCV1OA8ySI4oAVXgup/w45trORO7iHnIb3TNQbI2wfzQlITdnVLyyWX" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

View file

@ -29,7 +29,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <doxa-map> custom element. -->
<script src="../../doxa-simple-map.js" integrity="sha384-+8dz59bHJ1Bmu3eDCPVr22QrFPyRqBY+TdryhrL2JPvYSD0NNIskDN0WwP7NFmEn" crossorigin="anonymous"></script>
<script src="../../doxa-simple-map.js" integrity="sha384-t7ODT95QaJCV1OA8ySI4oAVXgup/w45trORO7iHnIb3TNQbI2wfzQlITdnVLyyWX" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

View file

@ -29,7 +29,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <doxa-map> custom element. -->
<script src="../doxa-simple-map.js" integrity="sha384-+8dz59bHJ1Bmu3eDCPVr22QrFPyRqBY+TdryhrL2JPvYSD0NNIskDN0WwP7NFmEn" crossorigin="anonymous"></script>
<script src="../doxa-simple-map.js" integrity="sha384-t7ODT95QaJCV1OA8ySI4oAVXgup/w45trORO7iHnIb3TNQbI2wfzQlITdnVLyyWX" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

View file

@ -29,7 +29,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <doxa-map> custom element. -->
<script src="../../doxa-simple-map.js" integrity="sha384-+8dz59bHJ1Bmu3eDCPVr22QrFPyRqBY+TdryhrL2JPvYSD0NNIskDN0WwP7NFmEn" crossorigin="anonymous"></script>
<script src="../../doxa-simple-map.js" integrity="sha384-t7ODT95QaJCV1OA8ySI4oAVXgup/w45trORO7iHnIb3TNQbI2wfzQlITdnVLyyWX" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

View file

@ -130,7 +130,7 @@ header.top .sub { margin-top: 3px; font: 12px/1.4 var(--sans); color: var(--mut)
<script>window.FORGE = {"mode":"built","scope":"bundle","manifestUrl":"../manifest.json","bundle":"doxa-simple-map","hrefBase":"../"};
/* file:// contract: manifest inlined at build — no fetch needed to render. */
window.FORGE.manifest = {"schema":"doxa-maps-manifest@1","generatedFrom":"app-profiles/*/*.vue","embedBase":".","bundleCount":10,"profileCount":19,"bundles":[{"bundle":"doxa-simple-map","scriptUrl":"./doxa-simple-map/doxa-simple-map.js","output":"doxa-maps/doxa-simple-map/doxa-simple-map.js","integrity":"sha384-+8dz59bHJ1Bmu3eDCPVr22QrFPyRqBY+TdryhrL2JPvYSD0NNIskDN0WwP7NFmEn","elements":["doxa-map","doxa-simple-map"],"profiles":[{"profile":"doxa-simple-map","file":"doxa-simple-map.vue","description":"","element":"doxa-map","iframeUrl":"./doxa-simple-map/doxa-simple-map/index.html","scriptUrl":"./doxa-simple-map/doxa-simple-map.js","embed":{"iframe":"\u003ciframe src=\"./doxa-simple-map/doxa-simple-map/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen>\u003c/iframe>","script":"\u003cscript src=\"./doxa-simple-map/doxa-simple-map.js\" integrity=\"sha384-+8dz59bHJ1Bmu3eDCPVr22QrFPyRqBY+TdryhrL2JPvYSD0NNIskDN0WwP7NFmEn\" crossorigin=\"anonymous\">\u003c/script>\n\u003cdoxa-map profile-config='{\"profile\":\"doxa-simple-map\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\"}'>\u003c/doxa-map>"},"instances":[{"id":"prayer","title":"Prayer Map","apiBaseUrl":"https://pray.doxa.life","props":{"profile":"doxa-simple-map","instanceId":"embed-prayer","dataSource":"pray-tools","tabs":[{"id":"prayer","colorStrategy":"prayer","legend":"prayer","popup":"prayer"}]},"element":"doxa-map","iframeUrl":"./doxa-simple-map/doxa-simple-map/prayer/index.html","embed":{"iframe":"\u003ciframe src=\"./doxa-simple-map/doxa-simple-map/prayer/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen>\u003c/iframe>"}},{"id":"engagement","title":"Engagement Map","apiBaseUrl":"https://pray.doxa.life","props":{"profile":"doxa-simple-map","instanceId":"embed-engagement","dataSource":"pray-tools","tabs":[{"id":"engagement","colorStrategy":"engagement","legend":"engagement","popup":"engagement"}]},"element":"doxa-map","iframeUrl":"./doxa-simple-map/doxa-simple-map/engagement/index.html","embed":{"iframe":"\u003ciframe src=\"./doxa-simple-map/doxa-simple-map/engagement/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen>\u003c/iframe>"}},{"id":"adoption","title":"Adoption Map","apiBaseUrl":"https://pray.doxa.life","props":{"profile":"doxa-simple-map","instanceId":"embed-adoption","dataSource":"pray-tools","tabs":[{"id":"adoption","colorStrategy":"adoption","legend":"adoption","popup":"adoption"}]},"element":"doxa-map","iframeUrl":"./doxa-simple-map/doxa-simple-map/adoption/index.html","embed":{"iframe":"\u003ciframe src=\"./doxa-simple-map/doxa-simple-map/adoption/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen>\u003c/iframe>"}}]}]}]};</script>
window.FORGE.manifest = {"schema":"doxa-maps-manifest@1","generatedFrom":"app-profiles/*/*.vue","embedBase":".","bundleCount":10,"profileCount":19,"bundles":[{"bundle":"doxa-simple-map","scriptUrl":"./doxa-simple-map/doxa-simple-map.js","output":"doxa-maps/doxa-simple-map/doxa-simple-map.js","integrity":"sha384-t7ODT95QaJCV1OA8ySI4oAVXgup/w45trORO7iHnIb3TNQbI2wfzQlITdnVLyyWX","elements":["doxa-map","doxa-simple-map"],"profiles":[{"profile":"doxa-simple-map","file":"doxa-simple-map.vue","description":"","element":"doxa-map","iframeUrl":"./doxa-simple-map/doxa-simple-map/index.html","scriptUrl":"./doxa-simple-map/doxa-simple-map.js","embed":{"iframe":"\u003ciframe src=\"./doxa-simple-map/doxa-simple-map/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen>\u003c/iframe>","script":"\u003cscript src=\"./doxa-simple-map/doxa-simple-map.js\" integrity=\"sha384-t7ODT95QaJCV1OA8ySI4oAVXgup/w45trORO7iHnIb3TNQbI2wfzQlITdnVLyyWX\" crossorigin=\"anonymous\">\u003c/script>\n\u003cdoxa-map profile-config='{\"profile\":\"doxa-simple-map\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\"}'>\u003c/doxa-map>"},"instances":[{"id":"prayer","title":"Prayer Map","apiBaseUrl":"https://pray.doxa.life","props":{"profile":"doxa-simple-map","instanceId":"embed-prayer","dataSource":"pray-tools","tabs":[{"id":"prayer","colorStrategy":"prayer","legend":"prayer","popup":"prayer"}]},"element":"doxa-map","iframeUrl":"./doxa-simple-map/doxa-simple-map/prayer/index.html","embed":{"iframe":"\u003ciframe src=\"./doxa-simple-map/doxa-simple-map/prayer/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen>\u003c/iframe>"}},{"id":"engagement","title":"Engagement Map","apiBaseUrl":"https://pray.doxa.life","props":{"profile":"doxa-simple-map","instanceId":"embed-engagement","dataSource":"pray-tools","tabs":[{"id":"engagement","colorStrategy":"engagement","legend":"engagement","popup":"engagement"}]},"element":"doxa-map","iframeUrl":"./doxa-simple-map/doxa-simple-map/engagement/index.html","embed":{"iframe":"\u003ciframe src=\"./doxa-simple-map/doxa-simple-map/engagement/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen>\u003c/iframe>"}},{"id":"adoption","title":"Adoption Map","apiBaseUrl":"https://pray.doxa.life","props":{"profile":"doxa-simple-map","instanceId":"embed-adoption","dataSource":"pray-tools","tabs":[{"id":"adoption","colorStrategy":"adoption","legend":"adoption","popup":"adoption"}]},"element":"doxa-map","iframeUrl":"./doxa-simple-map/doxa-simple-map/adoption/index.html","embed":{"iframe":"\u003ciframe src=\"./doxa-simple-map/doxa-simple-map/adoption/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen>\u003c/iframe>"}}]}]}]};</script>
<script>/**
* staging-forge.js — the ONE-PAGE semantic staging environment (root + bundle pages).
*

File diff suppressed because one or more lines are too long

View file

@ -156,7 +156,7 @@
"bundle": "doxa-research-map",
"scriptUrl": "./doxa-research-map/doxa-research-map.js",
"output": "doxa-maps/doxa-research-map/doxa-research-map.js",
"integrity": "sha384-dMUEdQvFvBb+sHwd2W9nMNUDINTYqnXj1C/dmMz/MYE40J4jvb9YGuEZgqexJozd",
"integrity": "sha384-47YL9pp+xscOoe3DTvaguzmwEiI1Gpj08xae7w68vUqwBeUXpgrmzGG8+4u+YyJK",
"elements": [
"doxa-research-map"
],
@ -170,7 +170,7 @@
"scriptUrl": "./doxa-research-map/doxa-research-map.js",
"embed": {
"iframe": "<iframe src=\"./doxa-research-map/research-map/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
"script": "<script src=\"./doxa-research-map/doxa-research-map.js\" integrity=\"sha384-dMUEdQvFvBb+sHwd2W9nMNUDINTYqnXj1C/dmMz/MYE40J4jvb9YGuEZgqexJozd\" crossorigin=\"anonymous\"></script>\n<doxa-research-map profile-config='{\"profile\":\"research-map\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\"}'></doxa-research-map>"
"script": "<script src=\"./doxa-research-map/doxa-research-map.js\" integrity=\"sha384-47YL9pp+xscOoe3DTvaguzmwEiI1Gpj08xae7w68vUqwBeUXpgrmzGG8+4u+YyJK\" crossorigin=\"anonymous\"></script>\n<doxa-research-map profile-config='{\"profile\":\"research-map\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\"}'></doxa-research-map>"
}
}
]
@ -179,7 +179,7 @@
"bundle": "doxa-simple-map",
"scriptUrl": "./doxa-simple-map/doxa-simple-map.js",
"output": "doxa-maps/doxa-simple-map/doxa-simple-map.js",
"integrity": "sha384-+8dz59bHJ1Bmu3eDCPVr22QrFPyRqBY+TdryhrL2JPvYSD0NNIskDN0WwP7NFmEn",
"integrity": "sha384-t7ODT95QaJCV1OA8ySI4oAVXgup/w45trORO7iHnIb3TNQbI2wfzQlITdnVLyyWX",
"elements": [
"doxa-map",
"doxa-simple-map"
@ -194,7 +194,7 @@
"scriptUrl": "./doxa-simple-map/doxa-simple-map.js",
"embed": {
"iframe": "<iframe src=\"./doxa-simple-map/doxa-simple-map/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
"script": "<script src=\"./doxa-simple-map/doxa-simple-map.js\" integrity=\"sha384-+8dz59bHJ1Bmu3eDCPVr22QrFPyRqBY+TdryhrL2JPvYSD0NNIskDN0WwP7NFmEn\" crossorigin=\"anonymous\"></script>\n<doxa-map profile-config='{\"profile\":\"doxa-simple-map\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\"}'></doxa-map>"
"script": "<script src=\"./doxa-simple-map/doxa-simple-map.js\" integrity=\"sha384-t7ODT95QaJCV1OA8ySI4oAVXgup/w45trORO7iHnIb3TNQbI2wfzQlITdnVLyyWX\" crossorigin=\"anonymous\"></script>\n<doxa-map profile-config='{\"profile\":\"doxa-simple-map\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\"}'></doxa-map>"
},
"instances": [
{

File diff suppressed because one or more lines are too long