Skip to content

Extra page shown when swiping back in Safari on iOS  #114324

New issue
New issue
Open
Open
Extra page shown when swiping back in Safari on iOS #114324
Labels
P2Important issues not at the top of the work listbrowser: safari-iosonly manifests in Safari on iOSc: regressionIt was better in the past than it is nowf: routesNavigator, Router, and related APIs.found in release: 3.24Found to occur in 3.24found in release: 3.25Found to occur in 3.25frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specificallyteam-webOwned by Web platform teamtriaged-webTriaged by Web platform team
@MarcBritton

Description

@MarcBritton
MarcBritton
opened on Oct 30, 2022

Tested using the Navigation and Routing application from the Flutter samples.
https://github.com/flutter/samples/tree/main/navigation_and_routing
I built this application for the web (flutter build web), then ran a local webserver on MacOS in build/web and connected to it with Safari from my iPhone.

When you swipe from outside the left edge of the screen across to the right on a Flutter Web app running in Safari on an iOS device, an 'extra' page is shown in the slide transition animation that shouldn't be there.

The bug only occurs if you begin your swipe from outside the left edge of the display and then swipe across. If you begin from slightly inside the left edge of the screen, only 2 screens are displayed in the transition and it looks correct.

I tested this swiping behaviour in other web pages/apps and it doesn't occur, so it seems to be specific to Flutter.

I also tested in the Chrome browser from my iOS device and the same problem occurs, so it seems the problem is not specific to Safari.

The video shows alternating swipes first from the outside the left edge, then inside.

swipe_bug.mov

Activity

MarcBritton
mentioned this on Oct 30, 2022
danagbemava-nc
added
in triagePresently being triaged by the triage team
on Oct 31, 2022
danagbemava-nc

danagbemava-nc commented on Oct 31, 2022

@danagbemava-nc
danagbemava-nc
on Oct 31, 2022
Member

Hi @MarcBritton, kindly reduce the code sample to only the relevant parts required to reproduce the bug. Ideally, it should be a single main.dart file.

Please also provide the output of flutter doctor -v.

Thank you

danagbemava-nc
added
waiting for customer responseThe Flutter team cannot make further progress on this issue until the original reporter responds
on Oct 31, 2022
MarcBritton

MarcBritton commented on Nov 1, 2022

@MarcBritton
MarcBritton
on Nov 1, 2022
Author

flutter doctor -v output:

[✓] Flutter (Channel stable, 3.3.4, on macOS 12.6 21G115 darwin-x64, locale en-AU)
    • Flutter version 3.3.4 on channel stable at /Users/marcbritton/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision eb6d86ee27 (4 weeks ago), 2022-10-04 22:31:45 -0700
    • Engine revision c08d7d5efc
    • Dart version 2.18.2
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/marcbritton/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • 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)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14A400
    • CocoaPods version 1.11.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.72.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.50.0

[✓] Connected device (3 available)
    • iPhone SE (3rd generation) (mobile) • DA519C0F-2A9B-4FCF-8D50-19B40949E138 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-16-0 (simulator)
    • macOS (desktop)                     • macos                                • darwin-x64     • macOS 12.6 21G115
      darwin-x64
    • Chrome (web)                        • chrome                               • web-javascript • Google Chrome
      107.0.5304.87

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!
github-actions
removed
waiting for customer responseThe Flutter team cannot make further progress on this issue until the original reporter responds
on Nov 1, 2022
MarcBritton

MarcBritton commented on Nov 1, 2022

@MarcBritton
MarcBritton
on Nov 1, 2022 · edited by danagbemava-nc
Author

Reproducible with this sample code:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const FirstScreen(),
    );
  }
}

class FirstScreen extends StatelessWidget {
  const FirstScreen({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Page'),
      ),
      body: Center(
        child: TextButton(
          child: const Text('Go To Second Page'),
          onPressed: () => Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => const SecondScreen(),
            ),
          ),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  const SecondScreen({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Page'),
      ),
      body: Center(
        child: TextButton(
          child: const Text('Go To Third Page'),
          onPressed: () => Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => const ThirdScreen(),
            ),
          ),
        ),
      ),
    );
  }
}

class ThirdScreen extends StatelessWidget {
  const ThirdScreen({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Third Page'),
      ),
      body: const Center(child: Text('Third Page')),
    );
  }
}
slide.from.outside.screen.extra.page.MP4
slide.from.inside.screen.no.extra.page.MP4
danagbemava-nc

danagbemava-nc commented on Nov 1, 2022

@danagbemava-nc
danagbemava-nc
on Nov 1, 2022
Member

Issue is reproducible using the code sample provided in #114324 (comment).

recording
RPReplay_Final1667284945.MP4
flutter doctor -v 
[✓] Flutter (Channel stable, 3.3.6, on macOS 13.0 22A380 darwin-arm, locale en-GB)
    • Flutter version 3.3.6 on channel stable at /Users/nexus/dev/sdks/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 6928314d50 (6 days ago), 2022-10-25 16:34:41 -0400
    • Engine revision 3ad69d7be3
    • Dart version 2.18.2
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9123335/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14A309
    • CocoaPods version 1.11.3

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

[!] Android Studio
    • Android Studio at /Applications/Android Studio Preview.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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] Android Studio (version 2021.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.13+0-b1751.21-8125866)

[!] Android Studio
    • Android Studio at /Applications/Android Studio Preview 2.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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] Android Studio (version 2021.3)
    • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9123335/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.13+0-b1751.21-8125866)

[✓] Android Studio (version 2021.3)
    • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9014738/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.13+0-b1751.21-8125866)

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

[✓] Connected device (3 available)
    • iPhone 14 Pro (mobile) • 5B802496-18C0-4AF6-84C2-57E11359A79B • ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-0 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 13.0 22A380 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 107.0.5304.87

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 2 categories.

[!] Flutter (Channel master, 3.5.0-12.0.pre.46, on macOS 13.0 22A380 darwin-arm64, locale en-GB)
    • Flutter version 3.5.0-12.0.pre.46 on channel master at /Users/nexus/dev/sdks/flutters
    ! Warning: `flutter` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 0f1d0e39e9 (70 minutes ago), 2022-11-01 13:33:33 +0800
    • Engine revision f721db653d
    • Dart version 2.19.0 (build 2.19.0-356.0.dev)
    • DevTools version 2.18.0
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9123335/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14A309
    • CocoaPods version 1.11.3

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

[!] Android Studio
    • Android Studio at /Applications/Android Studio Preview.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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] Android Studio (version 2021.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.13+0-b1751.21-8125866)

[!] Android Studio
    • Android Studio at /Applications/Android Studio Preview 2.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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] Android Studio (version 2021.3)
    • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9123335/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.13+0-b1751.21-8125866)

[✓] Android Studio (version 2021.3)
    • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9014738/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.13+0-b1751.21-8125866)

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

[✓] Connected device (3 available)
    • iPhone 14 Pro (mobile) • 5B802496-18C0-4AF6-84C2-57E11359A79B • ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-0 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 13.0 22A380 darwin-arm64
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 107.0.5304.87

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 3 categories.
danagbemava-nc
added
frameworkflutter/packages/flutter repository. See also f: labels.
f: routesNavigator, Router, and related APIs.
platform-webWeb applications specifically
has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
browser: safari-iosonly manifests in Safari on iOS
found in release: 3.3Found to occur in 3.3
and removed
in triagePresently being triaged by the triage team
on Nov 1, 2022

62 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work listbrowser: safari-iosonly manifests in Safari on iOSc: regressionIt was better in the past than it is nowf: routesNavigator, Router, and related APIs.found in release: 3.24Found to occur in 3.24found in release: 3.25Found to occur in 3.25frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specificallyteam-webOwned by Web platform teamtriaged-webTriaged by Web platform team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @yjbanov@demetrio812@jasminder@kraa@sjohnsonaz

        Issue actions
          Extra page shown when swiping back in Safari on iOS · Issue #114324 · flutter/flutter