diff --git a/client/components/Anchored.less b/client/components/Anchored.less index aeb9f1d5f..1e4c3be11 100644 --- a/client/components/Anchored.less +++ b/client/components/Anchored.less @@ -1,11 +1,9 @@ .anchored-box { - position : absolute; - visibility : hidden; - justify-self : anchor-center; - @supports (inset-block-start: anchor(bottom)) { - inset-block-start : anchor(bottom); - } + position : absolute; + visibility : hidden; + justify-self : anchor-center; + inset-block-start : anchor(bottom); &.active { visibility : visible; } } \ No newline at end of file diff --git a/client/components/anchorPositioningPolyfill.js b/client/components/anchorPositioningPolyfill.js index 92050a45a..df4ab240c 100644 --- a/client/components/anchorPositioningPolyfill.js +++ b/client/components/anchorPositioningPolyfill.js @@ -8,27 +8,20 @@ let polyfillPromise; // look for `anchorName` in the computed styles const supportsAnchorPositioning = ()=>'anchorName' in document.documentElement.style; -// wait for initial render -const afterInitialRender = ()=>new Promise((resolve)=>{ - requestAnimationFrame(()=>{ - requestAnimationFrame(resolve); - }); -}); - export const bootstrapAnchorPositioningPolyfill = ()=>{ if(supportsAnchorPositioning()) return Promise.resolve(false); if(polyfillPromise) return polyfillPromise; - polyfillPromise = afterInitialRender() - .then(async ()=>{ + polyfillPromise = (async ()=>{ + try { const { default: polyfill } = await import('@oddbird/css-anchor-positioning/fn'); await polyfill(); return true; - }) - .catch((error)=>{ + } catch (error){ polyfillPromise = undefined; throw error; - }); + } + })(); return polyfillPromise; }; \ No newline at end of file diff --git a/client/components/dropdown/dropdown.less b/client/components/dropdown/dropdown.less index f5cb17682..28a26954c 100644 --- a/client/components/dropdown/dropdown.less +++ b/client/components/dropdown/dropdown.less @@ -6,16 +6,18 @@ } .menu-list { - position : absolute; + position : fixed; z-index : 1000; - position-area : block-end span-inline-end; + top : anchor(bottom); + left : anchor(left); position-try: flip-inline flip-block; color: inherit; // [popover] gets a `canvastext` color value from useragent. > .menu-wrapper { position:relative; > .menu-list { margin: 0 0px; - position-area: inline-end span-block-end; + top : anchor(top); + left : anchor(right); position-try: flip-inline; } }