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

Closed
DHDaniel opened this issue Jun 9, 2018 · 6 comments

Comments

Projects
None yet
5 participants
@DHDaniel
Copy link

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.

@welcome

This comment has been minimized.

Copy link

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.

@andrew-oko-odion

This comment has been minimized.

Copy link

commented Nov 6, 2018

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

@DHDaniel

This comment has been minimized.

Copy link
Author

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.

@Karl-Stefan

This comment has been minimized.

Copy link

commented Dec 5, 2018

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

semantic-ui-react: 0.83.0

@layershifter

This comment has been minimized.

Copy link
Member

commented Mar 6, 2019

Warning was added in #2936.

@psv-git

This comment has been minimized.

Copy link

commented Mar 9, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.