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

393
August 11, 2018, at 1:00 PM

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

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

READ ALSO
Comma inside SCSS map value (box-shadow)

Comma inside SCSS map value (box-shadow)

So I want to declare multiple box shadow values on an element, which is valid CSS if written with a comma in-between the values like this:

166
What does `&amp;#my-id` mean in CSS or SASS?

What does `&#my-id` mean in CSS or SASS?

I inherited some CSS code, which is making use of the & character prior to the id name to style itIt looks something like this:

102
How to create grid layout where all unknown number of rows have equal height but not the last row?

How to create grid layout where all unknown number of rows have equal height but not the last row?

I am creating a form with the unknown number of rows but the last row should be fixed height which contains form action button now how to write this in the grid system

113
Extra space character appearing when I use &#39;&#231;&#39; via content on CSS

Extra space character appearing when I use 'ç' via content on CSS

I am inserting some content through the content property in my CSS fileWhen I have the รง character, I get an extra space

122