26

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?

0

8 Answers 8

34

simply add position: -webkit-sticky;

2
  • 3
    @debanjanB you're right, here's my explanation. At the moment, Safari only support this feature with the prefix -webkit-. Maybe this link will help you understand caniuse.com/#search=sticky
    – eledgaar
    Mar 8, 2019 at 9:47
  • 6
    Also for Safari, the sticky element needs to be a block-level element (or use display: block). I was was trying to make a <button> sticky, but it wasn't working in Safari because buttons are inline-block by default.
    – bryanbraun
    Jul 25, 2019 at 17:41
9

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

2
  • Thanks man, I was having an issue with Sticky/Position Bottom in Safari ...and display: block; on the sticky element worked a treat! No idea why but seems to have done the job! Jun 17, 2021 at 18:38
  • 4
    FWIW I'm actually a woman :) Really glad it worked for you, it's a neat fix! Jun 23, 2021 at 21:07
6

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

4
  • You might have solved your use case but have you found why sticky wasn't working ?
    – Laura
    Sep 14, 2018 at 19:54
  • 2
    @Laura It's only Safari's implementation of sticky. It simply doesn't work in this specific scenario of overflow:auto; and position:sticky that Safari doesn't handle. Hence this workaround which uses position:fixed instead.
    – accelerate
    Sep 14, 2018 at 22:20
  • Thanks this worked for me, I had a much more complicated layout where the first and last columns were static, the middle columns needed to scroll horizontally if there were too many, and the whole first row needed to stick to the top of the screen. I ended up using this trick for the middle columns, and was able to keep the first and last columns' top row sticky.
    – JStephen
    Jan 2, 2019 at 15:08
  • Unfortunately, this eliminates interactivity in the sticky element, because of the z-index: -1. It's a nice trick though.
    – Andy E
    Jan 3, 2019 at 18:27
5

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>
0
4

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

position: sticky;
position: -webkit-sticky;
display: block;
1
  • For me, on iPhone with software version 14.7, it doesn't work. On iPhone with software version 15.2.1, it works. Jan 27, 2022 at 13:44
1

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.

0

Another solution for this specific case, so long as you don't need the scroll bar on the far right of the modal.

Since your sticky element is the same height as your .modal-content, you could remove sticky altogether from .sticky-element. First, remove overflow:auto from .modal-content, then add that style to .left-content since that's the part you want to scroll anyway.

1
  • Realized right after posting this the OP wants to be able to scroll the left side while over the fixed section to the right. This wouldn't allow for that either.
    – shaws
    Sep 28, 2020 at 15:21
-1

i cant really test this for safari right now but this has always been an alternative for me when creating a sticky footer for example:

<!DOCTYPE html>
<html>
<head>
    <title>sticky side div</title>
    <style type="text/css">
        .maindiv{
            position: relative;
            display: inline-block;
            background-color: forestgreen;
            width: calc(100vw - 150px);
            height: 100%;
            overflow: auto;
        }
        .sidediv{
            position: fixed;
            display: inline-block;
            background-color: lightyellow;
            float: right;
            width: 100px;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="maindiv">
        Lorem 45    
    </div>
    <div class="sidediv">
        Lorem 30
    </div>
    <div class="maindiv">
        Lorem 100
    </div>
    <div class="maindiv">
        Lorem 900
    </div>
</body>
</html>

once you know the width of your right content add a little more px to it then use the css calc function to make sure the other div's don't flow in to it

also there is a known bug with vh and vw in Safari 7. You can fix it by setting height: inherit on the #child elements whose parents have vh heights or vw widths

but my best recommendation if you were not going for cross browser support will be to use CSS Grids

1
  • I tried your markup, and it worked only as is. But if I add a parent element with position:absolute, the right panel is not positioned correctly. I posted a solution that I just got from someone else that suits my needs.
    – accelerate
    Aug 21, 2018 at 2:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.