Skip to content
This repository was archived by the owner on Jun 13, 2024. It is now read-only.
This repository was archived by the owner on Jun 13, 2024. It is now read-only.

Long white screen after back-gesture on gallery.flutter.dev #898

Not planned
@eseidelGoogle

Description

@eseidelGoogle

I presume the browser is intercepting the back gesture and so the long white is some sort of reload of the page?

Not sure.

https://youtu.be/bR9S7TQXN74

Activity

eseidelGoogle

eseidelGoogle commented on Apr 28, 2020

@eseidelGoogle
Author

Google Chrome | 80.0.3987.162 (Official Build) (64-bit)

I'm not sure how to get the version of Flutter from gallery.flutter.dev, but I suspect it was published today, probably from whatever is head at flutter/gallery.

eseidelGoogle

eseidelGoogle commented on Apr 29, 2020

@eseidelGoogle
Author

Now I'm getting a long black screen when going backwards (instead of a long white screen).

FWIW I'm using an iPhone X.

yjbanov

yjbanov commented on Apr 30, 2020

@yjbanov
Contributor

Curious if you are hitting / and being redirected to /# when we actually start painting a frame. We should have a look at this.

yjbanov

yjbanov commented on Apr 30, 2020

@yjbanov
Contributor

/cc @mdebbar in case this is fixable at the navigator level.

eseidelGoogle

eseidelGoogle commented on May 1, 2020

@eseidelGoogle
Author

I just type "gallery.flutter.dev" into a browser to go there. I'm currently seeing it through the gallery.flutter.dev PWA saved to my homescreen (via Safari). I'm happy to try and debug further if needed.

eseidelGoogle

eseidelGoogle commented on May 1, 2020

@eseidelGoogle
Author

Currently on an iPhone X, running 13.4 (17E255). Model MQA52LL/A

SmilySeal

SmilySeal commented on May 10, 2020

@SmilySeal

I've the same kind of problem with my PWAs on iOS. Everytime the user does a swipe back gesture to a previous page, there is a long white screen before the page showing up

Flutter (Channel beta, v1.17.0, on Microsoft Windows [Versión 10.0.18363.778]

added
P4Priority 4 - Won't have unless everything else is done
and removed
P3Priority 3 - Could have
on Jun 16, 2020
ghost

ghost commented on Feb 6, 2021

@ghost

I have the same problem. Running my app as a PWA in Safari on iOS (either in-browser or added to homescreen, same problem).

When I swipe back it's like it creates another instance of the app and I can swipe left and right between the two instances and it creates lots of nasty side-effects too.

Here's a sample video:

mobile-pwa-bug

I can't seem to find a way to disable this back swipe either.

TahaTesser

TahaTesser commented on Oct 4, 2021

@TahaTesser
Member

I can reproduce on iOS physical device (Chrome & Safari) and simulator running a minimal sample as well as Flutter Gallery (where Gallery seems to refresh itself after a second when swiping back),

RPReplay_Final1633341682.mov
stable master
❗️ ❗️

Check flutter doctor -v outputs for each channel below

flutter doctor -v
[✓] Flutter (Channel stable, 2.5.2, on macOS 12.0 21A5534d darwin-x64, locale en-GB)
    • Flutter version 2.5.2 at /Users/tahatesser/Code/flutter_stable
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 3595343e20 (4 days ago), 2021-09-30 12:58:18 -0700
    • Engine revision 6ac856380f
    • Dart version 2.14.3

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/tahatesser/Code/SDK
    • Platform android-30, build-tools 30.0.2
    • 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)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 13.0, Build version 13A233
    • 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.60.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.26.0

[✓] Connected device (4 available)
    • Taha’s iPhone (mobile) • 00008020-001059882212002E            • ios            • iOS 15.0 19A346
    • iPhone 5s (mobile)     • B035CFEC-6EA7-4FEE-85A2-01C703FC268E • ios            • com.apple.CoreSimulator.SimRuntime.iOS-12-4 (simulator)
    • macOS (desktop)        • macos                                • darwin-x64     • macOS 12.0 21A5534d darwin-x64
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 94.0.4606.61
    ! Error: Taha’s iPhone is busy: Making the device ready for development. Xcode will continue when Taha’s iPhone is finished. (code -10)

• No issues found!
[✓] Flutter (Channel master, 2.6.0-12.0.pre.185, on macOS 12.0 21A5534d darwin-x64, locale en-GB)
    • Flutter version 2.6.0-12.0.pre.185 at /Users/tahatesser/Code/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 91dd3276fd (2 days ago), 2021-10-02 10:18:03 -0700
    • Engine revision 6f4143e800
    • Dart version 2.15.0 (build 2.15.0-172.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/tahatesser/Code/SDK
    • Platform android-30, build-tools 30.0.2
    • 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)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • 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.60.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.26.0

[✓] Connected device (4 available)
    • Taha’s iPhone (mobile) • 00008020-001059882212002E            • ios            • iOS 15.0 19A346
    • iPhone 5s (mobile)     • B035CFEC-6EA7-4FEE-85A2-01C703FC268E • ios            • com.apple.CoreSimulator.SimRuntime.iOS-12-4 (simulator)
    • macOS (desktop)        • macos                                • darwin-x64     • macOS 12.0 21A5534d darwin-x64
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 94.0.4606.61
    ! Error: Taha’s iPhone is busy: Making the device ready for development. Xcode will continue when Taha’s iPhone is finished. (code -10)

• No issues found!

✅: No Issue ❗️: Issue reproduced

Thanks for filing the issue

tannermeade

tannermeade commented on Oct 19, 2021

@tannermeade

Something that has not been mentioned: the "white page" that previous comments have mentioned is the index.html page that is first loaded before the compiled flutter app is loaded dynamically. You can tell this by modifying the CSS styling in the raw index.html of a Flutter web app to say... color the background orange... the white screen that is swiped back to is no longer white, but orange.

I found this because I am adding a CSS loading screen to my Flutter web app after I build it, and the white screen is my loading screen before it initializes the app again.

9 remaining items

yohom

yohom commented on Sep 16, 2022

@yohom

Hi folks, I found a workaround to disable the swipe back gesture on iOS Safari.
Simply put, this is to disable the default gesture on the Flutter root view. in your index.html, like this:

  window.addEventListener('load', function (ev) {
    // Download main.dart.js
    _flutter.loader.loadEntrypoint({
      serviceWorker: {
        serviceWorkerVersion: serviceWorkerVersion,
      }
    }).then(function (engineInitializer) {
      return engineInitializer.initializeEngine();
    }).then(function (appRunner) {
      return appRunner.runApp();
+   }).then(function (_) {
+     const flutterRoot = document.getElementsByTagName('flt-glass-pane').item(0);
+     flutterRoot.addEventListener('touchstart', (e) => {
+       // is not near edge of view, exit
+       if (e.pageX > 24 && e.pageX < window.innerWidth - 24) return;
+       // prevent swipe to navigate gesture
+       e.preventDefault();
+     });
+   });
  });
ditman

ditman commented on Sep 16, 2022

@ditman
Member

I don't know if we can instruct our router to replace the current url (https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API#example_of_replacestate_method) but, the internet seems to suggest that if there's no more than one History entry, the back swipe gesture won't trigger.

See this, for example: ionic-team/ionic-framework#22299

hlynurl

hlynurl commented on Sep 18, 2022

@hlynurl

Hi folks, I found a workaround to disable the swipe back gesture on iOS Safari. Simply put, this is to disable the default gesture on the Flutter root view. in your index.html, like this:

  window.addEventListener('load', function (ev) {
    // Download main.dart.js
    _flutter.loader.loadEntrypoint({
      serviceWorker: {
        serviceWorkerVersion: serviceWorkerVersion,
      }
    }).then(function (engineInitializer) {
      return engineInitializer.initializeEngine();
    }).then(function (appRunner) {
      return appRunner.runApp();
+   }).then(function (_) {
+     const flutterRoot = document.getElementsByTagName('flt-glass-pane').item(0);
+     flutterRoot.addEventListener('touchstart', (e) => {
+       // is not near edge of view, exit
+       if (e.pageX > 24 && e.pageX < window.innerWidth - 24) return;
+       // prevent swipe to navigate gesture
+       e.preventDefault();
+     });
+   });
  });

This does not disable the swipe back gesture. It makes it a little bit more difficult but it is still very much possible to swipe and receive the same bad UX as this thread talks about. I appreciate the effort though !

johnpryan

johnpryan commented on Sep 19, 2022

@johnpryan
Contributor

The Gallery uses named routes, which won't sync with the browser history correctly. The Gallery should probably use the Router API via a package like go_router. This should be easier now that it supports multiple navigation stacks but right now each app-within-the-app uses it's own MaterialApp widget. This might be OK but isn't something the Router API is designed to handle.

added and removed
P4Priority 4 - Won't have unless everything else is done
on Feb 13, 2023
transferred this issue fromflutter/flutteron Feb 13, 2023
luisgurmendez

luisgurmendez commented on Mar 24, 2023

@luisgurmendez

Probably related flutter/flutter#114324

guidezpl

guidezpl commented on Aug 9, 2023

@guidezpl
Member

This no longer seems to be reproducible on Chrome or Safari, closing. Filed #993 for switching routing to go_router

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

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @yjbanov@johnpryan@ditman@kf6gpe@lyf571321556

        Issue actions

          Long white screen after back-gesture on gallery.flutter.dev · Issue #898 · flutter/gallery