CODEWITHSUNDEEP
htmlcssnode.jscss-anchor
TheLovelySausage
TheLovelySausage

Reputation: 4104

CSS Anchor Positioning Polyfill not handling position fallbacks

I added the Oddbird Css Anchor Positioning Polyfill Oddbird Css Anchor Positioning Polyfill for use in Firefox and it seems to be working nicely.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>None</title>
</head>
<body>
    <style>
        * { 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; }
    </style>

    <div id="anchors">
        <button id="exampleA" class="anchor" style="anchor-name: --exampleA">
            Example A
        </button>

        <button id="exampleB" class="anchor" style="anchor-name: --exampleB">
            Example B
        </button>
    </div>

    <div id="anchorChildren">
        <div id="exampleAChild" class="anchorChild" style="position: absolute; inset: auto; position-anchor: --exampleA; top: anchor(bottom); left: anchor(left); position-try: --anchor-fallback;">
            <p>Example A Child</p>
        </div>

        <div id="exampleBChild" class="anchorChild" style="position: absolute; inset: auto; position-anchor: --exampleB; top: anchor(bottom); left: anchor(left); position-try: --anchor-fallback;">
            <p>Example B Child</p>
        </div>
    </div>

    <script type="module" src="index.js"></script>
</body>
</html>

index.js

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")
            ]
        });
    }
});

Except the position-try: --anchor-fallback; doesn't seem to be working and I haven't been able to figure out why. I wonder if there's an additional step for the fallbacks that I am missing

Upvotes: 0

Views: 83

Answers (0)

Related Questions