Flutter Web: URL Bar not hiding on scroll

Question

I have a Flutter web app that contains a SingleChildScrollView and a number of elements in it. When viewed on my iPhone's Safari, the URL and bottom bars do not hide as I scroll downwards as it would on any other site.

I've tried a number of things including using different elements like ListViews and playing with the physics, but the URL and bottom bars still are not dismissed.

Any ideas how I could configure a web flutter app to help the browser recognize the scroll and dismiss them?

Answer 1

Check out this thread in GitHub: Flutter for Web does not hide url bar and navigation bar on scroll in iOS's Safari

Credit: jamesblasco

You can add this to the of the index.hml file of any flutter project and try it also there.

<style>
  body {
    height: 500vh !important;  /* Bigger than 100% to allow scroll */
    position: static !important;  /* Override absolute from flutter */
    overflow-y: scroll !important; /* Allows verticall scrolling */
    overflow-x: hidden !important;
    touch-action: pan-y !important;  /* Allows vertical scrolling */
    overscroll-behavior: none; /* Avoid bouncing scrolling on top/bottom edget */
  }

  /* Centers flutter canvas with a size of the viewport*/
  flt-glass-pane {
    position: fixed !important; /* Overrides absolute from flutter  */
    top: 50vh  !important;
    left: 50vw  !important;
    max-width: 100vw  !important;
    max-height: 100vh  !important;
  transform: translate(-50vw, -50vh)  !important;
  }

  /* 
  Scrollbar hide doesn't work on iOS, they add a default one when overflow:true and  -webkit-overflow-scrolling: touch; 
  Sadly since iOS 13, this value is forced on iOS -> https://developer.apple.com/documentation/safari-release-notes/safari-13-release-notes
*/
  ::-webkit-scrollbar {
    display: false;
    width: 0px;
    height: 0px;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
  }
</style>