You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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).
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.
The text was updated successfully, but these errors were encountered:
@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.