[Popover] Remove fixed positioning dependent on scroll position

[isaac-peka]

I had a look around for any issue that's mentioned this before but couldn't find anything. It's an obvious one, so I suspect its been raised and gone over before so if that's the case apologies for the time wasting.

Problem Description

There's a lot of rubberbanding with dynamically positioned components when scrolling, a good example of this is the Popover: http://www.material-ui.com/v0.15.0-alpha.1/#/components/popover. Is there a reason material-ui uses a full screen fixed container to position dynamic elements as opposed to absolute positioning on the window, or even absolute in a local container? It would produce a much better UX if components didn't move when scrolling.

Another side effect of this is that you can't easily use hover event listeners to open popovers, since when the full screen layer is created it triggers an onMouseLeave.

Versions

• Material-UI: 0.15
• React: 0.14
• Browser: Google Chrome, Safari

[nathanmarks]

@newoga this is the same as what we're talking about in #3144.

Should it be a new issue?

[newoga]

@newoga this is the same as what we're talking about in #3144.

@nathanmarks Yes, I believe so. The #3144 PR designed to solve this, but the discussion there ended up raising the same points as this issue.

Should we give this issue a new name and track it here and close #3144?

[newoga]

@sampeka We're aware of this issue and have been having some discussions on how to solve this. Many of our components use Popover, so if we fix it there, we'll likely fix it everywhere.

We are also considering using something like react-overlays that could fix this.

[davnicwil]

@newoga Any update on this?

I'm using material-ui in production and very happy with everything - but the janky popovers on scroll are the one and only thing that users always notice and complain about.

It would be amazing to get this fixed, at least for me it's the only significant remaining 'con' of using material-ui over the other popular component libraries.

Happy to contribute if there's anything I can do.

[mbrookes]

@nathanmarks Was this resolved for next? I see the component was migrated, but as there's no Popover demo yet, (and no other popover based component demos to test with), I'm not sure of the status.

If not, then perhaps we should be thinking of using Tether? If it's good enough for bootstrap... 😄

[oliviertassinari]

If not, then perhaps we should be thinking of using Tether? If it's good enough for bootstrap...

Bootstrap moved to popper.js lately. I think that we could be taking advantage of this library for new use cases. As for the v1-beta branch, we have been blocking the scroll with the fixed positioned element. I do think that the issue is solved.