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

Design help General
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