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

Position fixed elements inside <Sidebar.Pushable> #2897

DHDaniel opened this issue Jun 9, 2018 · 7 comments

Position fixed elements inside <Sidebar.Pushable> #2897

DHDaniel opened this issue Jun 9, 2018 · 7 comments


Copy link

DHDaniel commented Jun 9, 2018

Feature Request

Problem description

I'm developing an app with the awesome pushable sidebar Semantic UI component. Inside the app (i.e inside the display that is 'pushed') I wanted to have a sticky component that becomes fixed when scrolling. However, the <Sticky> Semantic UI component was not working - on scrolling, it seemed to jump off the screen completely. I spent ages (at least a whole day) trying to figure out why it wasn't working, and even tried to implement my own solution, to see if it was a bug with <Sticky>. However, after scourging the web for hints, I finally discovered the problem.

The <Sidebar.Pushable> component adds a translate3d() CSS transform to the div it renders as. Essentially, this means that the coordinate system becomes warped, and you can no longer use fixed positioned elements inside the parent that was transformed. This means that <Sticky> does not work inside a <Sidebar.Pushable> element (or any position: fixed; element, for that matter).

Proposed solution

I eventually solved it by setting transform: none; on the <Sidebar.Pushable> element using my own CSS, noticing that the pushable sidebar was still working even after taking it away. Hence, I can think of two solutions:

  • Place a clear warning in the documentation for the <Sidebar> component that indicates fixed positioning will not be available inside it - after all, I was not aware that the <Sidebar> component was applying any transforms, or that those transforms rendered fixed positioning unavailable.
  • Remove the transform property from <Sidebar.Pushable> altogether. I'm not sure if this has any performance impacts, but it did solve my issue. I had to do it manually, but perhaps it could be removed by default to save some headaches. Alternatively, a prop could be passed enabling or disabling transforms.

Either way, I think the documentation should make it clear that position: fixed elements will not work as desired inside components that have been transformed.

Copy link

welcome bot commented Jun 9, 2018

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

Copy link

@DHDaniel it still flickers even after I set transform: none did you do something else.
I need help getting it working

Copy link

DHDaniel commented Nov 7, 2018

@andrew-oko-odion I only set transform: none on <Sidebar.Pushable> and that seemed to work. I tested it on Chrome and Firefox, and I was working with Semantic UI React 0.78.2, if that helps.

Perhaps make sure that there aren't any other pesky transforms in any of your parent containers.

Also, my problem was not that it flickers, but that it jumps of the screen completely (disappears and gets absurdly large x and y coordinates). If it's flickering but still scrolling and staying on screen, the issue may be somewhere else.

Copy link

Karl-Stefan commented Dec 5, 2018

Can confirm this, and that setting transform: none on <Sidebar.Pushable> fixes it.

semantic-ui-react: 0.83.0

Copy link

Warning was added in #2936.

Copy link

psv-git commented Mar 9, 2019

@DHDaniel thanks you guy! I look it so long.

Copy link

This gist illustrates what appears to be a complete solution to the problem. It's easy to implement and should adapt well to most implementations.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet

No branches or pull requests

6 participants