Skip to content

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

Description

@clay4649

Steps to Reproduce

  1. Create new Flutter project
  2. 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,
        ),
      ),
    );
  }
}
  1. Run flutter run -d web-server --web-port 8080
  2. Open iOS simulator and go to localhost:8080
  3. 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

Metadata

Metadata

Assignees

Labels

assigned for triageissue is assigned to a domain expert for further triagebrowser: safari-macosonly manifests in Safari on macOSf: scrollingViewports, list views, slivers, etc.found in release: 1.24Found to occur in 1.24frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-iosiOS applications specificallyplatform-webWeb applications specificallyr: duplicateIssue is closed as a duplicate of an existing issue

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions