Safari position:sticky not working in an overflow:auto element

Question

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?

Answer 1

simply add position: -webkit-sticky;

Answer 2

Adding display: block to the .sticky-element worked for me without having to add position: -webkit-sticky. Found this solution at this Codepen.

Answer 3

I got this solution from someone else:

http://cssdeck.com/labs/bu0nx69w

Basically, instead of position:sticky, use position:fixed for the right panel. The key is to also you will-change:transform in a parent div (in the above example, in .modal-content) so position:fixed becomes fixed relative to that parent, and not the viewport. It's a neat little trick

Answer 4

I had a similar case:

<div scroll>
    <div sticky />
    <list />
</div>

Just wrap the scroll content with a div worked like a charm:

<div scroll>
    <div>
       <div sticky />
       <list />
    </div>
</div>

Answer 5

I had to use below to make it work in both Chrome and Safari:

position: sticky;
position: -webkit-sticky;
display: block;

Answer 6

position: sticky will not work, if your parent element has overflow: hidden. having this sticky setting, it will have automatically transform your element from relative to actual fixed to the top border of the document.