CODEWITHSUNDEEP
htmlcssiossafariaddress-bar
Darek
Darek

Reputation: 211

Hide address bar on fixed positioned views in Safari iOS 15

Our app uses fixed positioned views in order to achieve nice navigation transitions. In the recent update for iOS (15) the address bar went to the bottom of the device. Since we're using fixed positioning and nested scrolls (body is not scrollable with height: 100% equal to the device height), we're not getting the default behaviour of collapsing the address bar when scrolling. Is there any way to fix that? The minimum code necessary to replicate this issue is here:

<html>
  <style>
    body {
      overflow: hidden;
      height: 100%;
    }

    div {
      position: fixed;
      overflow: scroll;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      font-size: 40px;
    }
  </style>
  <body>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sollicitudin iaculis dictum. Phasellus in purus in risus volutpat tempor et id lectus. Aenean sodales odio at magna pellentesque mollis. Aenean bibendum lacus eu diam ornare dapibus. Maecenas nunc sapien, facilisis eu blandit bibendum, tempus ut lacus. Curabitur dui ipsum, malesuada sit amet condimentum non, gravida id lacus. Nulla elementum euismod euismod. Aliquam ac felis turpis. Sed accumsan leo arcu, eget suscipit felis tempor vel. Quisque vel nunc eget quam rutrum pulvinar at in libero. 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sodales sem ac purus maximus, tempor porta leo pharetra. Cras vitae eleifend ex. Duis ipsum ex, ornare sed enim hendrerit, porta vestibulum risus. Nam eu maximus ante, ut viverra urna. Cras convallis scelerisque dolor. Quisque varius massa at odio faucibus lacinia. Nunc pharetra fringilla arcu luctus rutrum. Nullam vel sapien ipsum. Maecenas scelerisque cursus dui ut sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
      Maecenas volutpat sodales odio, quis condimentum nisl fringilla et. Phasellus tincidunt, arcu ac mattis volutpat, libero sapien interdum felis, eget lobortis ex velit nec nisl. Pellentesque dictum pellentesque rhoncus. Pellentesque facilisis nibh ex, eget aliquam lacus condimentum eget. Proin vel fermentum enim. Integer rutrum sodales neque rutrum congue. Pellentesque non odio lobortis, congue lacus vitae, egestas nulla. Proin pellentesque interdum nibh, nec lobortis ex pulvinar eget. Quisque egestas arcu vel efficitur consequat. 
      Curabitur eros elit, euismod in fringilla in, commodo sed arcu. Cras varius porttitor nibh, eget tincidunt mauris tincidunt ac. Proin id lacinia eros, vel rutrum sapien. Curabitur ac felis sed mauris pellentesque molestie et in nisi. Cras sed tincidunt massa. Nulla ullamcorper urna eget ipsum accumsan interdum. Sed et lacus sit amet purus faucibus faucibus. Quisque fringilla posuere tellus in dapibus. Aliquam vehicula ultrices auctor. Etiam cursus efficitur felis. Fusce sit amet nisi leo. Ut eget urna consectetur, venenatis mauris eu, bibendum risus. Aliquam bibendum, nisl sit amet aliquet tempor, metus dolor faucibus ligula, quis rhoncus diam purus nec dolor. Phasellus pellentesque vehicula massa eu lacinia. 
      Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras a condimentum ex. Morbi accumsan eros sit amet dolor sodales, vel cursus orci porttitor. Phasellus varius urna id erat suscipit, et eleifend nisi facilisis. Maecenas eget sem tempor, tincidunt enim in, elementum lacus. Donec eu aliquet tellus, non varius ante. Integer blandit sagittis metus, ac ultricies nisi. Cras tempus nisl et vehicula ultricies. Sed id elementum sapien. Proin scelerisque ante sed tellus rhoncus, blandit egestas erat ultrices. Suspendisse eget ante elementum, condimentum velit lobortis, lacinia dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus.
    </div>
  </body>
</html>

If you open that in the iOS simulator safari (or your device) you will be able to scroll up and down, but the address bar will not be affected. But if you will remove the overflow: hidden; from body and position: fixed; overflow: scroll; from the div you will see that the address bar is nicely collapsing with scroll.

Is there a way to fix this with having nested scrolls?

Upvotes: 8

Views: 2213

Answers (3)

T 7
T 7

Reputation: 34

window.scrollTo(0,1)

<meta name="viewport" content="width=device-width, minimal-ui">
<meta name="viewport" content="minimal-ui">

Upvotes: 0

Whatery1087
Whatery1087

Reputation: 69

window.scrollTo(0,1)

<meta name="viewport" content="width=device-width, minimal-ui">
<meta name="viewport" content="minimal-ui">

Upvotes: 1

Tiago Nobrega
Tiago Nobrega

Reputation: 535

You can try scrolling the window whenever the fixed element is scrolled. Note: The setTimeout is important. Removing it might lead to unexpected behavior.

const element = document.getElementbyId("content");

var lastScrollTop = 0;
element.addEventListener("scroll", function(){ 
   var st = window.pageYOffset || document.documentElement.scrollTop; 
   if (st > lastScrollTop){
      setTimeout(function(){
        // Hide the address bar!
        window.scrollTo(0, 1);
      }, 0);
   } else {
      // upscroll code
      setTimeout(function(){
        // Show the address bar!
        window.scrollTo(0, 0);
      }, 0);
   }
   lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);

Upvotes: 1

Related Questions