question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Wrong placement when an ancestor/parent container uses transform and translate

See original GitHub issue

Background

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:

placement-issue

This issue applies to version 2.11.0 of Popper, but other version my be affected as well.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:7
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
jcfrancocommented, Feb 14, 2022

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.

0reactions
atomikscommented, Mar 12, 2022

Fixed in @popperjs/core@2.11.3

Read more comments on GitHub >

github_iconTop Results From Across the Web

20574 - Fixed-position element uses transformed ancestor as ...
Issue 20574: Fixed-position element uses transformed ancestor as the container ... My English is bad, but with the help of a translator friend,...
Read more >
How to stop `translate` transform from causing an element to ...
I'm finding that applying transform: translateY(-50%) to the container is causing the child to treat this container as though it were position: ...
Read more >
Un-fixing Fixed Elements with CSS Transforms - meyerweb.com
This means that any transforms you apply to the transformed element are not applied to the positioned descendants, because transforms don't ...
Read more >
Coordinate Systems, Transformations and Units – SVG Tiny 1.2
This is the list of transforms that manipulate the coordinate system between the element and its nearest ancestor 'svg' element, i.e. in this...
Read more >
Position an element relatively to another element from ... - WICG
Problem - I need to position a popup modal / tooltip / dialog relative to ... (or use transform: translate() ) to set...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found