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

Design help General
1

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

Chrome_sticky
Chrome_sticky800×407 1.02 MB

And How it works wrong on Safari

Safari_wrong
Safari_wrong800×436 265 KB

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)

2

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

3

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

4

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

5

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

6

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

Now it’s working correctly

7

Friendly reminder about my issue :wink:

8

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

9

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

10

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.

4 Likes
11

That worked for me too. Thank you, @Yukon! :pray:

12

Thank you @Yukon. This fixed it for me, so useful :+1:

13

Thanks @Yukon that worked for me as well. No side effects that I can see.

Thinking there should be a more recognized solution from Webflow? (Not blaming Webflow for the Safari issue, but we need websites to work in that browser just the same.)

14

Thank you! It’s worked