Streaming live at 10am (PST)

Sticky Position issue/bug on Safari(mobile and web)

Hi, Webflow community,

I’ve got the weird issue with my sticky and fixed component on Safari browser(mobile and web).

Below how it works correctly on Chrome

And How it works wrong on Safari

Link to the website:
https://nomtek20.webflow.io/portfolio/switch

Could someone help with this layout issue?

Best
Michal


Here is my site Read-Only: Link
(how to share your site Read-Only link)

You could address this by giving a higher z-index to the div.div-main-container-portfolio element.

Hi, @webdev thank you for a reply.
Unfortunately, this is not the issue with the z-index value. That was my first thing to check when I discovered the issue/bug.
On Chrome and Firefox, everything works perfect, and this also proves that z-indexes are set correctly( see the first gif from the first post)
However, to double-check I’ve given higher z-index to the div.div-main-container-portfolio element and still is the same issue

During my investigation, I’ve found a few things which can help solve the problem.
On the GIF below we can see a few things worth to mention

  1. On Start during scroll Hero section is not covered by div.div-main-container-portfolio even if div.div-main-container-portfolio has a higher z-index
  2. After scroll to the bottom part of the page, something strange happens, and Hero suddenly disappear.
  3. When you go back to the top of the page after disappear of the hero section, some magic happens, and hero section behaves like suppose too.

safari_issue2

I hope that’s gonna help solve this issue :slight_smile:

Best
Michal

Anyone can help me?
This is not easy to solve :stuck_out_tongue:

It may be easier to get assistance if you shared your project read-only link.

@webdev
Ohh sorry, I made mistake in my read-link footer.:grimacing:

Now it’s working correctly

Friendly reminder about my issue :wink:

I did a workaround and it’s working.
Have a nice day :slight_smile:

Hey there, got the same problem. How exactly did you fix it?

For anyone wondering, I found that setting the element below (the one that should go over the sticky content) to sticky as well but leaving all the settings at auto did solve the problem on safari without any side effects.