The flutter web page can't go into full-screen experience when scroll up page on Safari iOS 15

[skypu3]

There is new design on mobile Safari iOS 15：
https://www.techadvisor.com/how-to/apple/use-safari-ios-15-3806585/

the tab bar should slide down to the bottom of the screen for a full-screen browsing experience
The test flutter web page: https://gallery.flutter.dev/#/crane

There are two issues:

1. The tab bar can't minimize when page scroll up.
2. Can't have full screen mode when device is rotated into landscape mode.

[TahaTesser]

Hi @skypu3

The tab bar can't minimize when the page scroll up.

The Tabbar here in the crane example has fixed height, it doesn't minimize on any browser, this is expected behavior.
In order for the app to have minimized, you can use sliverappbar, test it in the browser. I'm not sure this is an issue with Flutter

Can you please provide more details

[skypu3]

Hi @TahaTesser

For example, check sample: https://flutter.dev/docs/cookbook/lists/grid-lists
The flutter grid list scrolls up, it should minimize the tab bar on the bottom.
However, it can't be minimized, the issue screenshot should as below:

You can compare the web page (which can scroll) with flutter web on Safari iOS 15

And it also can't be full screen, there are blank parts on the bottom

[TahaTesser]

Hi @skypu3
Oh, I got it now, thanks. Indeed Flutter web page doesn't go full screen.

Here is a quick comparison

Portrait

RPReplay_Final1632383444.mov

Landscape

RPReplay_Final1632383494.mov

stable	master
❗️	❗️

Check flutter doctor -v outputs for each channel below

flutter doctor -v

[✓] Flutter (Channel stable, 2.5.1, on macOS 12.0 21A5522h darwin-x64, locale en-GB)
    • Flutter version 2.5.1 at /Users/tahatesser/Code/flutter_stable
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ffb2ecea52 (6 days ago), 2021-09-17 15:26:33 -0400
    • Engine revision b3af521a05
    • Dart version 2.14.2

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/tahatesser/Code/SDK
    • Platform android-31, build-tools 30.0.3
    • ANDROID_HOME = /Users/tahatesser/Code/SDK
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 13.0, Build version 13A233
    • CocoaPods version 1.10.2

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

[✓] Android Studio (version 2020.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 12.0 21A5522h darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 94.0.4606.54

! Doctor found issues in 1 category.

[✓] Flutter (Channel master, 2.6.0-6.0.pre.184, on macOS 12.0 21A5522h darwin-x64, locale en-GB)
    • Flutter version 2.6.0-6.0.pre.184 at /Users/tahatesser/Code/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 64161b6caa (10 hours ago), 2021-09-22 18:38:04 -0400
    • Engine revision dd28b6f1c8
    • Dart version 2.15.0 (build 2.15.0-137.0.dev)

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/tahatesser/Code/SDK
    • Platform android-31, build-tools 30.0.3
    • ANDROID_HOME = /Users/tahatesser/Code/SDK
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.

[✓] Xcode - develop for iOS and macOS (Xcode 13.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.10.2

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

[✓] Android Studio (version 2020.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 12.0 21A5522h darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 94.0.4606.54

! Doctor found issues in 1 category.

✅: No Issue ❗️: Issue reproduced

Thanks for filing the issue

[yjbanov]

Closing as a duplicate of #69529

[FantasyOR]

hi, in order for the web application to expand to the full screen and scroll at the same time, it is enough to add this style:

    <head>
   ...
     
        <style>
            body {
                height: 100vh !important;
                position: static !important;
            }
        </style>
    </head>

[github-actions]

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.