CSS-Ankerpositionierungs-Polyfill verarbeitet keine Positions-Fallbacks
Posted: 15 Jan 2025, 14:27
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
index.js
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
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
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")
]
});
}
});