doxa-life/doxa-maps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

MapInfo's backdrop sits above every map's own top layer, so no pin hint floats over the dialog

Browse source 
PinHint's first-visit pill sits at z-index 2147482000, so with MapInfo's scrim at 1000 the pill floated
bright and clickable over the dimmed backdrop while the popup was open (gospel; measured on the live
build: the pill's centre hit the pill, not the scrim, on Cities). The scrim goes to 2147483000; the
dialog is its child, inside the scrim's stacking context, so it stays on top of the scrim. The root fix
is the top layer (<dialog>.showModal()), carded.
This commit is contained in:
Doxa Maps 2026-09-29 23:45:35 +00:00
parent 31bb8c3894
commit b86dcc3df2
1 changed files with 5 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
library/components/info/MapInfo.vue
View file

@ -201,7 +201,11 @@ useShadowStyles(`
@keyframes mi-nudge{ 0%,100%{ transform:translateX(0) } 50%{ transform:translateX(6px) } }
@keyframes mi-nudge-left{ 0%,100%{ transform:translateX(0) } 50%{ transform:translateX(-6px) } }
.mi-scrim{ position:fixed; inset:0; z-index:1000; background:rgba(15,20,35,.55);
/* z-index above every map's own top layer: PinHint's first-visit pill sits at 2147482000, so at 1000 it
floated bright and clickable over the dimmed backdrop (gospel). The dialog is a child of this fixed,
z-indexed scrim, so it paints inside the scrim's stacking context, on top of it. The root fix is the
top layer (<dialog>.showModal()); until then this is the highest layer the page uses. */
.mi-scrim{ position:fixed; inset:0; z-index:2147483000; background:rgba(15,20,35,.55);
display:flex; align-items:center; justify-content:center; padding:24px; }
.mi-dialog{ background:#fff; color:#1b1f2a; width:min(720px, 100%); max-height:min(88vh, 100%);
border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.35); display:flex; flex-direction:column;