Search code examples
csstwitter-bootstrapcss-position

Safari "position: fixed" is overlapped on scroll

On Safari (Mac)** when I scroll on Bhooks.com, the cards overlap the footer and the header of the webpage (with position: fixed). So far I'm unable to figure out why and I'm hoping to find some help here.

I also upgraded Bootstrap to the latest version, just to make sure.

Here's a screenshot of the issue: enter image description here

I know it's a very specific bug and I don't have a small minimal example (because developing on my Mac VM is a nightmare). But at least the problem is easily accessible and easy to debug.

Thanks for your help!

** in my case macOS mojave 10.14.3 with Safari 12.0.3

Solution

  • It's definitely a z-index order problem in the Safari. Try this CSS:

    .bhooksBookCard {
  -webkit-transform: translate3d(0,0,0);
}

    Find this solution in this thread

    Please try and let me know if it fixed your problem. Tested in the inspector and seems like it works.