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.
<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>