Wrong arrow positioning in transformed container

[mojabyte]

When the reference, popper, and arrow elements are descendants of an element with transform style, the arrow positioning will break, while the popper position is correct. It happens only when the container with the transform style is smaller than the reference size + popper size.

To reproduce, use this test that applies a transform: scale(1); style to a parent with no visual changes:

<div id="container">
    <div id="transform">
        <div id="reference"></div>
        <div id="popper"></div>
        <div id="arrow"></div>
    </div>
</div>

<style>
    @import '_reset.css';

    #container {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #transform {
        transform: scale(1);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #reference {
        width: 40px;
        height: 40px;
    }

    #popper {
        width: 100px;
        height: 100px;
    }

    #arrow{
        position: fixed;
        width: 10px;
        height: 10px;
        background: black;
        transform: translate(-50%, -50%) rotate(45deg);
    }
</style>

<script type="module">
    import {reposition} from '/dist/nanopop.mjs';

    const reference = document.querySelector('#reference');
    const popper = document.querySelector('#popper');
    const arrow = document.querySelector('#arrow');

    reposition(reference, popper, {
        position: location.hash.slice(1),
        arrow: arrow
    });
</script>

the result would be:

[mojabyte]

The problem is using the refBox[variantKey] to calculate the arrowVariantVal in:

nanopop/src/index.ts

Line 196 in 4913582

refBox[variantKey] + refBoxCenterOffset : variantVal + variantSize / 2;

refBox position values are calculated from the viewport. Still, when applied to the arrow that is a descendant of an element with the transform style, it is positioned based on that element instead of the viewport (Elements with transforms act as a containing block for fixed position descendants). This is why the arrow is positioned wrong horizontally in the above example.

The wrong vertical position is because of this line:

nanopop/src/index.ts

Line 199 in 4913582

if (positionVal < refBox[positionKey]) {

that similarly uses refBox[positionKey].

Using matched position and variant keys to infer the arrow position offsets from the popper position will fix the issue. I've proposed a fix in this PR #26.

[simonwep]

Hey! This is awesome (your issue, not the bug haha) - thank you for this elaborate bug-report and description :D I'll comment on your PR!