1

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

Improve this question

3 Answers 3

Reset to default
5

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.

Improve this answer
5
  • Oooh I had tried that only for individual .cards but never bothered to try the z-index:1 value in the class itself. It indeed doesn't work for (any) first row, but for the successive ones. How strange, but it's a big step forward.
    – Doidel
    Commented Apr 11, 2020 at 5:16
  • Changing the .hardcover_front's z-index didn't help, neither did increasing the header's or footer's. I also tried to add an empty div with z-index: 1 at the front of the first cards, but also unsuccessfully. This is probably a Safari bug I should report, or what do you think?
    – Doidel
    Commented Apr 11, 2020 at 5:20
  • I'll expert more with your page and I let you know.
    – Dmytro Cheglakov
    Commented Apr 11, 2020 at 5:27
  • Fantastic! Thanks for your help, it works! Much appreciated, I wouldn't have figured it out without you!
    – Doidel
    Commented Apr 11, 2020 at 11:38
  • 1
    Great! I'm was glad to help you.
    – Dmytro Cheglakov
    Commented Apr 11, 2020 at 16:28
0

https://weblog.west-wind.com/posts/2015/jun/05/ipad-scroll-issues-with-fixed-content

check this out,

removing overflow: auto, and –webkit-overflow-scrolling: touch from the container that parallels to the overlapping tag will help you

but, some scrolling issue may persist

Improve this answer
0

The better solution however is to simply replace position:fixed with position:absolute if possible.

Improve this answer
New contributor
Sfs is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
1
  • 1
    As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Community Bot
    Commented Jul 5 at 20:26

Not the answer you're looking for? Browse other questions tagged or ask your own question.