Material-ui: [Tooltip] Component fire on resize event of the iframe

[aviyi]

Current Behavior 😯

When a user hover on button with tooltip the onresize event of the iframe fired

Expected Behavior 🤔

The onresize event shouldn't be fired

Steps to Reproduce 🕹

1. Go to https://codesandbox.io/s/muddy-violet-hcnkt?file=/src/App.js
2. Open the console.log
3. Hover on the icon button

Context 🔦

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | v5.?.? |
| React | |
| Browser | |
| TypeScript | |
| etc. | |

[eps1lon]

Thanks for the report.

Technical explanation: The tooltip has its own box and no position: absolute; when closed. Once we open it, we apply position: absolute and the required transform. There seems to be a timing issue (probably explainable by the browser render pipeline) that results in the iframe being considered resized. You can visualize this by using <Tooltip PopperProps={{keepMounted:true}} />.

I think I have a fix for this but I also observed some oddities about Tooltip inline styles.

[oliviertassinari]

The onresize event shouldn't be fired

@aviyi What issue does it trigger on your application? I mean, why is this important?

Could it be a problem with popper.js?

[eps1lon]

@aviyi What issue does it trigger on your application? I mean, why is this important?

Any events triggering unexpectedly or when they're not supposed to is a problem. Non-deterministic side-effects in general are problematic. This shouldn't be confused with React's render being non-deterministic.

Could it be a problem with popper.js?

Not sure how this is helpful.

[aviyi]

If you put on the MuiTooltip-popper class top :0 . it will fix this issue

[michael-ecb]

The onresize event shouldn't be fired

@aviyi What issue does it trigger on your application? I mean, why is this important?

Could it be a problem with popper.js?

iframe size recalculated and cause rerender ...