Popper-core: Incorrect placement of popper if ref is in flex container with odd-numbered height

[haakemon]

CodePen demo

https://codepen.io/hbogs/pen/XePdRj

Steps to reproduce the problem

1. Add a container element around the ref, with the following:
2. display: flex;
3. align-items: center;
4. height: 121px; (or any odd-number)
5. The popper will now overlap the ref

Removing the flex, or setting the height to an even number will fix the issue.

What is the expected behavior?

The popper should not overlap the ref element.
(The border on the ref element in the codepen example is not needed, but it makes it a lot easier to visualize the problem.)

What went wrong?

The popper overlaps the ref element with 1px.

Any other comments?

I might have missed something here, but I dont understand why the size of the ref's container should affect the position of the popper?

[FezVrasta]

The position of the popper is directly dependent by the position and size of the reference element. To obtain the popper position we do reference.top + reference.height or reference.getBoundingClientRect().bottom

Looks like flex elements have some quirk that makes the box sizes be wrong in this case. I'm investigating it.

[ConneXNL]

Also ran into this issue.

[kjdion84]

Yep this issue goes along with the other positioning issues related to scrollbar.

It seems to me that popper should do its calculations after everything in the dom has loaded, so that it works seamlessly with dynamic elements as well.

This is the largest issue with the package right now.

[TrueRushHunt3r]

@kjdion84 Do you know if the Issue with the scrollbar is still active? Because I am experiencing this behaviour, that my tooltips from Mui only are in the right place (bottom-center) when a scrollbar shows up. When no scrollbar is there, they are shifted by a few (maybe 20px) to the left. But this behaviour started at first when I started to make the root div 100% height.

[kejodion]

The issue is that popper does the calculations before the DOM is done loading, and does not factor in new DOM elements added via AJAX etc.

[TrueRushHunt3r]

mhm... ok. I am now doing a workaround that i am always showing th scrollbar. Not the best solution but IMO better then misspositioned tooltips '^^

[kejodion]

The solution is to use html title attribute instead.

[TrueRushHunt3r]

Can you explain this a bit more. I thought title is for representing the Title not for rearangement of some positions.

EDIT: Ok, I get it. Just using the html tooltips and not the Mui Tooltips.

[FezVrasta]

This seems to be fixed in v2
https://codepen.io/FezVrasta/pen/mdyOPxj