0

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?

1 Answer 1

0

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>
2
  • I came across this while searching for the same issue. The app has stop detecting any touch on buttons after this but yes it does go full screen now. All I did was put this style tag in head section of my index.html. Any pointers?
    – Damandroid
    Jun 17, 2021 at 22:39
  • @Damandroid, this behavior is noted by James Blasco in the original GitHub thread, no workaround at the moment
    – MariusB
    Mar 2, 2022 at 11:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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