Wrong placement when an ancestor/parent container uses transform and translate
See original GitHub issueBackground
We have a custom select component (Web component using ShadowDOM) that uses Popper.js internally for placement of a dropdown container. The custom component has a trigger element and a container/popper element that basically gets fed into createPopper
like this:
let popperInstance = createPopper(
triggerElement,
popperElement,
{
placement: "bottom-start",
strategy: "fixed"
});
Under normal circumstances this works perfect and as it should. The problem arises when this custom element has an ancestor or parent that uses a CSS transform (eg. transform: translate(x, y)). It seems like the placement logic doesn’t account for transform/translate happening to parents, so that the placement is off by the sum of all of them.
Say I have a custom element named <my-foo>
and it is placed in the DOM like this:
<html>
...
<div class="some-container">
<my-foo></my-foo>
</div>
...
</html>
Where the CSS for some-container
looks like this:
.some-container {
position: fixed; /* or absolute */
transform: translate(100px, 100px);
}
Then when the trigger element inside my-foo
gets clicked the placement of popper element will be off by +100px in both directions (x and y).
The funny thing is that if we change the CSS above (for the container) to use left and top positions instead of transform it get placed correctly:
.some-container {
position: fixed; /* or absolute */
left: 100px;
top: 100px;
}
I’ve made a repro here: https://codesandbox.io/s/sharp-stitch-5woo8
Screenshot of the repro:
This issue applies to version 2.11.0 of Popper, but other version my be affected as well.
Issue Analytics
- State:
- Created 2 years ago
- Reactions:7
- Comments:6 (2 by maintainers)
Top GitHub Comments
Upon closer inspection, it seems that the placement is incorrect when there’s shadow DOM involved:
w/ shadow DOM ❌ https://codepen.io/jcfranco/pen/podrpaR
w/o shadow DOM ✅ https://codepen.io/jcfranco/pen/BamdJEK
I submitted #1535 with a potential fix.
Fixed in
@popperjs/core@2.11.3