I’m having a real problem trying to get position: sticky to work the same in Safari as it does in Chrome. Very weirdly, the problem seems to go away when I put the whole source code into a Codepen and test on Safari, which really makes me think the problem might somehow be to do with Webflow.
Here is my site Read-Only: LINK. The elements that should be sticky have the class sticky – it’s most of the background images. Have a look in Chrome and you’ll see the desired behaviour.
Lots of weird behaviours, elements not showing up on scroll down, but then showing on scroll up, etc.
I’m not sure what’s going on, but I’ve tried:
- changing the display type of the elements,
- remove overflow properties on all parent/ancestor elements
- setting the height of the container
- double checking that there is a top: 0
- putting the sticky elements outside the flex containers if possible.
- checking there is
-webkit-stickyalong withposition: sticky.
And I am testing on latest version of Safari.
What else can I try?