CSS-Ankerpositionierungs-Polyfill verarbeitet keine Positions-Fallbacks ⇐ HTML

[Guest]

Ich habe das Oddbird Css Anchor Positioning Polyfill Oddbird Css Anchor Positioning Polyfill zur Verwendung in Firefox hinzugefügt und es scheint gut zu funktionieren.
index.html

Code: Select all

None



* { margin: 0; padding: 0; }

.anchor { padding: 25px 100px; }

.anchorChild { width: 400px; padding: 25px 0; border: solid 1px black; background-color: grey; }

@position-try --anchor-fallback { top: anchor(bottom); right: anchor(right); left: revert; }



Example A



Example B



Example A Child

Example B Child

index.js

Code: Select all

import polyfill from "@oddbird/css-anchor-positioning/fn";

window.addEventListener("DOMContentLoaded", () => {
if(!("anchorName" in document.documentElement.style)) {
polyfill({
elements: [
document.getElementById("exampleA"),
document.getElementById("exampleAChild"),
document.getElementById("exampleB"),
document.getElementById("exampleBChild")
]
});
}
});

Außer der Positionsversuch: --anchor-fallback; scheint nicht zu funktionieren und ich konnte nicht herausfinden, warum. Ich frage mich, ob es einen zusätzlichen Schritt für die Fallbacks gibt, die mir fehlen