[Tooltip] Tooltip misaligned when using 100vh and CssBaseline

[beaudry]

When the #root has a height of 100vh and using the <CssBaseline />, tooltips seem to be misaligned.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

• When using the <CssBaseline /> alone, the tooltip is centered
• When using the height: 100vh on the #root alone, the tooltip is centered
• When using both, the tooltip is not centered, until the window is resized

Expected Behavior 🤔

The Tooltip should be always centered.

Steps to Reproduce 🕹

1. Go on sandbox
2. Look on the right
3. The tooltip is not centered
   4.1. Resize de preview window. It should now be centered. Reload the page
   4.2. Remove the <CssBaseline />. It should now be centered.
   4.3. Add back the <CssBaseline />, then remove the Css import. It should now be centered.

Context 🔦

This appeared when switching from 4.3 to 4.5.

Our situation is not as simple as removing the 100vh. We've opened all our tooltips, and it seems some of them are centered, and some others are not. We are currently trying to investigate on that.

Your Environment 🌎

Tech	Version
Material-UI	v4.5.0
React	16.10.2
Browser	Chromium 79.0.3933.0

[beaudry]

Ok so I've done a few tests, and the bug starts appearing when I update to 4.4.3.

[oliviertassinari]

I confirm, the regression is between 4.4.2 and 4.4.3. It seems that I was too aggressive in my refactoring: 7a86f11. Removing position absolute was the initial motivation, left and top were too good to be true. What do you think of the following diff? Do you want to submit a pull request? :)

diff --git a/packages/material-ui/src/Popper/Popper.js b/packages/material-ui/src/Popper/Popper.js
index 4232a2562..66e3bf9e2 100644
--- a/packages/material-ui/src/Popper/Popper.js
+++ b/packages/material-ui/src/Popper/Popper.js
@@ -212,6 +212,9 @@ const Popper = React.forwardRef(function Popper(props, ref) {
         style={{
           // Prevents scroll issue, waiting for Popper.js to add this style once initiated.
           position: 'fixed',
+          // Fix Popper.js display issue
+          top: 0,
+          left: 0,
         }}
         {...other}
       >

[beaudry]

Sure! I'm on it!

[beaudry]

It works only on the first showing. If you MouseLeave then MouseOver quickly, it moves back to the uncentered place. Just using top: 0 give this result.

From what I could gather, my hypothesis would be linked the scrollbar:

1. It's rendered below all the html
   1.1. The scrollbar is shown
2. It calculates the horizontal position
3. The vertical position is set
   3.1 The tooltip is moved up
   3.2 The scrollbar disappear
4. Since the scrollbar was on the right, while the position is calculated from the left, and since the content is centered, the horizontal alignment is off.

It would also explain why I needed to have an html node that was height: 100vh to have the bug appear on sandbox.

I'll try to keep digging, but any pointer would be helpful.

[oliviertassinari]

@beaudry I propose to report the issue to Popper.js directly or to consider.

[oliviertassinari]

We had a duplicate report on #17859. I think that we can move the proposed revert forward. It solves a good portion of the issue and has been added in the first place to solve similar issues: #15811.

@rahulkotha18 could you restore the branch so we can reopen your pull request (#17824)? thanks!

[beaudry]

The issue can also be seen on the documentation pages where there is no scrollbar (such as the z-index) when hovering the "Change Language" button.

[vocko]

This thing seems to be still broken in 4.11.2.

I'm using drawer for a vertical menu and each menu item has a right side tooltip. When I set 100vh on the root element, all tooltips start to appear on the top of the page instead of next to the menu items as they are supposed to.

Interesting enough, the arrow is still in the correct place.

Any ideas where could be an issue?