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

eseidelGoogle · 2020-04-28T23:14:39Z

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

Not sure.

eseidelGoogle · 2020-04-28T23:15:19Z

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 · 2020-04-29T03:36:49Z

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 · 2020-04-30T21:47:03Z

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

yjbanov · 2020-04-30T21:47:20Z

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

eseidelGoogle · 2020-05-01T21:29:12Z

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 · 2020-05-01T21:30:20Z

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

nikssj · 2020-05-10T21:14:16Z

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]

ghost · 2021-02-06T18:46:22Z

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:

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

TahaTesser · 2021-10-04T10:03:21Z

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 · 2021-10-19T22:32:32Z

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.

xiqishow · 2022-01-04T03:24:28Z

anything changed for this?
It remain in flutter 2.8.1

guidezpl · 2022-04-13T12:58:02Z

#630 should fix this for gallery

collinNewCode · 2022-06-24T04:11:40Z

still the same problem

guidezpl · 2022-06-24T13:32:43Z

Similar issue occurring on Chrome, the logo is shown zoomed in for a number of seconds, then the home screen appears.

Any thoughts, @ditman?

ditman · 2022-06-24T19:53:30Z

Any thoughts, @ditman?

I'm not sure what routing/navigation system is the Gallery using currently, and I cannot reliably reproduce the issue, there's more things to it than just the index.html (which I can confirm I've seen). Other problems:

If you navigate from another page, the back gesture might take you completely out of the flutter application, and back to the previous page
Some times it will go back to the correct spot
Some times it'll go back to another sub-section

(I suspect most of the above are "non-standard" back behaviors that the browser does to be able to support the animation that follows the gesture)

I'm going to mention @johnpryan, who's working on evolving go_router, because maybe the solution is just to update the routing of the Gallery to something more modern (?) (unsure if they've handled the "back" gesture, rather than just clicking the "back button", or if the engine needs to cooperate to detect this gesture)

ditman · 2022-06-24T19:54:58Z

The zoomed-in logo is definitely the same issue described in the original message of the thread. White page -> Black page -> zoomed logo -> "a screenshot of the index.html before flutter modified the hash of the page to /#/"

lyf571321556 · 2022-08-04T08:03:30Z

same issue in flutter 3.0.5

hlynurl · 2022-08-09T22:56:05Z

Any update on this?

This backward swipe is a default behaviour of iOS users on web, it is not a good user experience that the app refreshes on the index page when the users swipe.

Did anyone at least find out a way to disable the swipe back, forcing the users to use other types of navigation?

yohom · 2022-09-16T01:37:59Z

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 · 2022-09-16T02:34:16Z

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 · 2022-09-18T18:26:44Z

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 · 2022-09-19T15:55:03Z

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.

luisgurmendez · 2023-03-24T20:52:15Z

Probably related flutter/flutter#114324

guidezpl · 2023-08-09T11:54:48Z

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

kf6gpe added the P3 Priority 3 - Could have label May 29, 2020

yjbanov added P4 Priority 4 - Won't have unless everything else is done and removed P3 Priority 3 - Could have labels Jun 16, 2020

tomgilder mentioned this issue Mar 15, 2021

[web]: No back/forward gesture support on iOS and MacOS browsers flutter/flutter#76478

Open

TahaTesser mentioned this issue Oct 4, 2021

Flutter web: swipe back action does not work flutter/flutter#91161

Closed

TahaTesser mentioned this issue Mar 10, 2022

An ios pwa question flutter/flutter#99930

Closed

huycozy mentioned this issue Sep 7, 2022

[Web][iOS] The back gesture causes multiple pages to respond. flutter/flutter#111077

Closed

yohom mentioned this issue Sep 16, 2022

[IOS] Flutter Web app can be swiped back using a drag gesture which rebuilds the web app flutter/flutter#99755

Open

koutalou mentioned this issue Nov 15, 2022

[Web] iOS Safariで Swipe backするとSplashに戻れる splathon/splathon-client#23

Open

guidezpl added triage and removed P4 Priority 4 - Won't have unless everything else is done labels Feb 13, 2023

guidezpl transferred this issue from flutter/flutter Feb 13, 2023

guidezpl removed the triage label Aug 9, 2023

guidezpl mentioned this issue Aug 9, 2023

Switch to go_router #993

Open

guidezpl closed this as not planned Won't fix, can't repro, duplicate, stale Aug 9, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

eseidelGoogle commented Apr 28, 2020

eseidelGoogle commented Apr 28, 2020

eseidelGoogle commented Apr 29, 2020

yjbanov commented Apr 30, 2020

yjbanov commented Apr 30, 2020

eseidelGoogle commented May 1, 2020

eseidelGoogle commented May 1, 2020

nikssj commented May 10, 2020 •

edited

Loading

ghost commented Feb 6, 2021

TahaTesser commented Oct 4, 2021

tannermeade commented Oct 19, 2021

xiqishow commented Jan 4, 2022

guidezpl commented Apr 13, 2022

collinNewCode commented Jun 24, 2022

guidezpl commented Jun 24, 2022

ditman commented Jun 24, 2022

ditman commented Jun 24, 2022

lyf571321556 commented Aug 4, 2022

hlynurl commented Aug 9, 2022

yohom commented Sep 16, 2022 •

edited

Loading

ditman commented Sep 16, 2022 •

edited

Loading

hlynurl commented Sep 18, 2022 •

edited

Loading

johnpryan commented Sep 19, 2022 •

edited

Loading

luisgurmendez commented Mar 24, 2023

guidezpl commented Aug 9, 2023

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

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

Comments

eseidelGoogle commented Apr 28, 2020

eseidelGoogle commented Apr 28, 2020

eseidelGoogle commented Apr 29, 2020

yjbanov commented Apr 30, 2020

yjbanov commented Apr 30, 2020

eseidelGoogle commented May 1, 2020

eseidelGoogle commented May 1, 2020

nikssj commented May 10, 2020 • edited Loading

ghost commented Feb 6, 2021

TahaTesser commented Oct 4, 2021

tannermeade commented Oct 19, 2021

xiqishow commented Jan 4, 2022

guidezpl commented Apr 13, 2022

collinNewCode commented Jun 24, 2022

guidezpl commented Jun 24, 2022

ditman commented Jun 24, 2022

ditman commented Jun 24, 2022

lyf571321556 commented Aug 4, 2022

hlynurl commented Aug 9, 2022

yohom commented Sep 16, 2022 • edited Loading

ditman commented Sep 16, 2022 • edited Loading

hlynurl commented Sep 18, 2022 • edited Loading

johnpryan commented Sep 19, 2022 • edited Loading

luisgurmendez commented Mar 24, 2023

guidezpl commented Aug 9, 2023

nikssj commented May 10, 2020 •

edited

Loading

yohom commented Sep 16, 2022 •

edited

Loading

ditman commented Sep 16, 2022 •

edited

Loading

hlynurl commented Sep 18, 2022 •

edited

Loading

johnpryan commented Sep 19, 2022 •

edited

Loading