According to CanIUse, there is a known issue with Safari and position:sticky
inside an overflow:auto
element:
A parent with overflow set to auto will prevent position: sticky from working in Safari
However, this is the exact use case that I need. I have a scrollable div, which is subdivided into two columns. The right column should be sticky and never move, even when the entire div is scrolled. The reason I'm using position:sticky
on the right column is that I want the user to be able to still scroll the left column with the cursor on the right column. And this was the only solution that I found to have worked.
A working example for Firefox / Chrome is here: http://cssdeck.com/labs/zfiuz4pc The orange area remains fixed while scrolling, but in Safari it doesn't.
The example above has some unnecessary wrappers to my issue, but I wanted to replicate as closely as possible the environment where I want to have this code working in. The basic gist of it is I have this:
<div class="modal-content">
<div class="left-content">
</div>
<div class="sticky-element">
</div>
</div>
And the CSS:
.modal-content {
display: flex;
overflow: auto;
flex-flow: row nowrap;
}
.left-content {
flex: 0 0 300px;
}
.sticky-element {
position: sticky;
top: 0;
right: 0;
width: 200px;
}
Again, this works in FF/Chrome but not in Safari. Is there a workaround to get it to work in all browsers? Or is there a different approach I can use to maintain scrollability even with the mouse cursor over the sticky element?
simply add position: -webkit-sticky;