Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Position fixed elements inside <Sidebar.Pushable>

See original GitHub issue

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.