Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Popover] Remove fixed positioning dependent on scroll position #3917

Closed
isaac-peka opened this issue Apr 9, 2016 · 6 comments
Closed

[Popover] Remove fixed positioning dependent on scroll position #3917

isaac-peka opened this issue Apr 9, 2016 · 6 comments
Labels
component: Popover The React component. v0.x

Comments

@isaac-peka
Copy link

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
Copy link
Member

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

Should it be a new issue?

@newoga
Copy link
Contributor

newoga commented Apr 9, 2016

@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 newoga changed the title Rubberbanding of components when scrolling [Popover] Remove fixed positioning dependent on scroll position Apr 9, 2016
@newoga newoga self-assigned this Apr 9, 2016
@newoga
Copy link
Contributor

newoga commented Apr 9, 2016

@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
Copy link

davnicwil commented Feb 10, 2017

@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
Copy link
Member

mbrookes commented Feb 10, 2017

@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 oliviertassinari added v1 and removed component: Popover The React component. labels Jul 28, 2017
@oliviertassinari
Copy link
Member

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.

@oliviertassinari oliviertassinari added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Dec 21, 2022
@zannager zannager added component: Popover The React component. v0.x and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jan 12, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: Popover The React component. v0.x
Projects
None yet
Development

No branches or pull requests

7 participants