[Popover] Remove fixed positioning dependent on scroll position

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

[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.