2

I have a menu overlay that's set to position:fixed and height: 100vw when opened. The content inside of it is scrollable.

If the bottom address bar in Safari is visible at the time the overlay is opened, and then shrinks when scrolling, the touch areas no longer line up where they're supposed to (ie. when tapping a link, a link below where you tap is targeted).

I also have classes added to body and html to prevent scrolling in the background when the overlay is open.

.disable-scroll-body {
    overflow: hidden;
    height:100%;    
}

.disable-scroll-html {
    position: static;
    overflow: hidden;
    height:100vh;
}

I've tried adding min-height: -webkit-fill-available to the overlay, as suggested in some other similar posts.

CSS:

.overlay {
    transform: translate3d(0px, -100%, 0px) scale3d(1, 1, 1);
    transform-style: preserve-3d;
    transition: transform 0.5s ease;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    background: #fff1e8;
    max-width: 100vw;
    display: flex;
    padding: 2em;
    height: 100vh;
    min-height: -webkit-fill-available;
 }
Scribble_Scratch
  • 403
  • 3
  • 18
  • Trying to add mentioned links, but the suggested edit queue is full. See this short answer to "CSS3 100vh not constant in mobile browser": https://stackoverflow.com/a/55003985/5069530 – Ingo Steinke Aug 17 '22 at 09:13
  • Adding the HTML would have been helpful to build a working code snippet, but we can probably guess. – Ingo Steinke Aug 17 '22 at 09:14

0 Answers0