You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Jun 13, 2024. It is now read-only.
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.
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.
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]
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.
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
j-cheung, xiqishow, lyf571321556, dehypnosis, luisgurmendez and 2 more
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.
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();+ });+ });
});
knutsonchrishlynurl, dehypnosis, koutalou, GoldNeck and knutsonchrisknutsonchris
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 !
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.
Activity
eseidelGoogle commentedon Apr 28, 2020
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 commentedon Apr 29, 2020
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 commentedon Apr 30, 2020
Curious if you are hitting
/
and being redirected to/#
when we actually start painting a frame. We should have a look at this.yjbanov commentedon Apr 30, 2020
/cc @mdebbar in case this is fixable at the navigator level.
eseidelGoogle commentedon May 1, 2020
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 commentedon May 1, 2020
Currently on an iPhone X, running 13.4 (17E255). Model MQA52LL/A
SmilySeal commentedon May 10, 2020
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 commentedon Feb 6, 2021
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 commentedon Oct 4, 2021
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 belowflutter doctor -v
✅: No Issue ❗️: Issue reproduced
Thanks for filing the issue
tannermeade commentedon Oct 19, 2021
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 commentedon Sep 16, 2022
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:
ditman commentedon Sep 16, 2022
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 commentedon Sep 18, 2022
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 commentedon Sep 19, 2022
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 commentedon Mar 24, 2023
Probably related flutter/flutter#114324
go_router
#993guidezpl commentedon Aug 9, 2023
This no longer seems to be reproducible on Chrome or Safari, closing. Filed #993 for switching routing to
go_router