Position fixed elements inside <Sidebar.Pushable>

[DHDaniel]

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]

👋 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]

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

[DHDaniel]

@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]

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

semantic-ui-react: 0.83.0

[layershifter]

Warning was added in #2936.

[psv-git]

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

[karmaniverous]

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.