Flutter for Web does not hide url bar and navigation bar on scroll in iOS's Safari

Steps to Reproduce

Create new Flutter project
Copy and paste code below in the main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        body: ListView.builder(
          itemBuilder: (context, index) => Container(
            child: Text('$index'),
          ),
          itemCount: 1000,
        ),
      ),
    );
  }
}

Run flutter run -d web-server --web-port 8080
Open iOS simulator and go to localhost:8080
Scroll the list

Expected results:
iOS's Safari should hide the url bar (top bar) and the navigation bar (bottom bar) while scrolling.

Actual results:
iOS's Safari does not hide both the url bar and navigation bar

Logs

Analyzing safari_scroll_bug...                                          
No issues found! (ran in 2.4s)

[✓] Flutter (Channel beta, 1.22.1, on Mac OS X 10.15.7 19H2, locale en-JP)
    • Flutter version 1.22.1 at /Users/panuavakul/Frameworks/flutter
    • Framework revision f30b7f4db9 (2 weeks ago), 2020-10-08 10:06:30 -0700
    • Engine revision 75bef9f6c8
    • Dart version 2.10.1

[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, set ANDROID_SDK_ROOT to that location.
      You may also want to add it to your PATH environment variable.


[✓] Xcode - develop for iOS and macOS (Xcode 11.7)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.7, Build version 11E801a
    • CocoaPods version 1.9.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).

[✓] VS Code (version 1.50.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.15.1

[✓] Connected device (3 available)
    • iPhone SE (2nd generation) (mobile) • 5CB0F884-F448-4A74-9D58-75FC3B8BD51D • ios            • com.apple.CoreSimulator.SimRuntime.iOS-13-7 (simulator)
    • Web Server (web)                    • web-server                           • web-javascript • Flutter Tools
    • Chrome (web)                        • chrome                               • web-javascript • Google Chrome 86.0.4240.111

@panuavakul
Can you upgrade to latest beta, try again and also share video of the issue.

Hey thanks, just upgraded to the latest beta

[✓] Flutter (Channel beta, 1.23.0-18.1.pre, on Mac OS X 10.15.7 19H2 x86_64, locale en-JP)

Here is a video of the issue

I believe the normal behavior of Safari is that it will hide the url bar and the navigation bar when scrolling.

Googling Flutter search results on iOS safari browser ans scrolling the results does hide the nav and url bar, but the same isn't happening when using Flutter web. Keeping this issue open for further analysis.

flutter doctor -v

[✓] Flutter (Channel dev, 1.24.0-1.0.pre, on Mac OS X 10.15.4 19E2269
    darwin-x64, locale en-IN)
    • Flutter version 1.24.0-1.0.pre at /Users/dhs/documents/Fluttersdk/flutter
    • Framework revision 12bea61c29 (11 days ago), 2020-10-14 15:57:04 -0700
    • Engine revision 069b3cf8f0
    • Dart version 2.11.0 (build 2.11.0-218.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.0)
    • Android SDK at /Users/dhs/Library/Android/sdk
    • Platform android-30, build-tools 30.0.0
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.0.1, Build version 12A7300
    • CocoaPods version 1.9.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 46.0.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)

[✓] VS Code (version 1.50.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.11.0

[✓] Connected device (3 available)
    • macOS (desktop)  • macos      • darwin-x64     • Mac OS X 10.15.4 19E2269
      darwin-x64
    • Web Server (web) • web-server • web-javascript • Flutter Tools
    • Chrome (web)     • chrome     • web-javascript • Google Chrome
      86.0.4240.111

• No issues found!

@yjbanov

Hello @yjbanov, here is some research I have been doing related to this problem:

The safari mobile WebKit uses the body scroll to handle this interaction. This requires the body overflow-y attribute to be set to auto/scroll and the body to have a size longer than 100%. Obviously, this is not the case for any flutter web as by default overflow is hidden.
After changing that I couldn't make it work programmatically by calling window.scrollTo(...) or windowScroll(). Only user manual drag worked.

By overriding, some of the default CSS attributes added by the flutter framework I manage to hide the bars. But also it broke most of the hitTest inside the flutter framework.

I also couldn't remove the scrollbar that appears after making these changes.

You have the demo here: https://jamesblasco.github.io/flutter-web-scroll/

You can add this to the <head> 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>

Deduplicating with #69529

Hi jamesblasco,

The aforementioned code only works in the Non Scrollview and Listview cases, however when we use Listview or Scrollview in Dart, the material does not scroll as intended.

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

Flutter for Web does not hide url bar and navigation bar on scroll in iOS's Safari #68877

Steps to Reproduce

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Flutter for Web does not hide url bar and navigation bar on scroll in iOS's Safari #68877

Description

Steps to Reproduce

Activity

darshankawar commented on Oct 23, 2020

clay4649 commented on Oct 23, 2020

darshankawar commented on Oct 26, 2020

jamesblasco commented on Nov 1, 2020

yjbanov commented on Dec 4, 2020

satishtravelstart commented on Jun 9, 2021

github-actions commented on Jul 31, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions