Extra page shown when swiping back in Safari on iOS #114324
Labels
browser: safari-ios
only manifests in Safari on iOS
f: routes
Navigator, Router, and related APIs.
found in release: 3.3
Found to occur in 3.3
found in release: 3.5
Found to occur in 3.5
framework
flutter/packages/flutter repository. See also f: labels.
has reproducible steps
The issue has been confirmed reproducible and is ready to work on
P2
Important issues not at the top of the work list
platform-web
Web applications specifically
team-web
Owned by Web platform team
triaged-web
Triaged by Web platform team
Comments
|
Hi @MarcBritton, kindly reduce the code sample to only the relevant parts required to reproduce the bug. Ideally, it should be a single Please also provide the output of Thank you |
danagbemava-nc
added
the
waiting for customer response
|
|
github-actions
bot
removed
the
waiting for customer response
|
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')),
);
}
}
|
|
Issue is reproducible using the code sample provided in #114324 (comment). recordingRPReplay_Final1667284945.MP4flutter doctor -v |
danagbemava-nc
added
framework
RPReplay_Final1669904974.MP4I have the same problem |
This comment was marked as duplicate.
This comment was marked as duplicate.
|
I reproduced the issue with a new project and simple code. Does anyone know where the problem could come from ? WhatsApp.Video.2023-01-28.at.13.38.52.mp4 |
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
|
By using WillPopScope and recreating the back button with the leading argument, we manage to make the page split disappear but the return is still not logical! WhatsApp.Video.2023-01-28.at.16.11.22.mp4 |
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
This was referenced Mar 24, 2023
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
This comment was marked as duplicate.
|
Interesting to notice that on iOS Simulator it works perfectly. |
This comment was marked as duplicate.
This comment was marked as duplicate.
flutter-triage-bot
bot
added
multiteam-retriage-candidate
team-web
|
I use the following workaround to prevent the first call to import 'dart:js';
/// Prevents first unnecessary [pushState] call made by the Flutter web engine
/// during its initialization.
///
/// This removes the extra page shown when swiping back in Safari on iOS.
void preventFirstPushState() {
final history = context["history"] as JsObject;
/// Store original pushState callback.
final originalCallback = history["pushState"] as JsFunction;
/// Define a temporary callback to catch first call.
/// Optionnal arguments are used to catch var args call.
void temporaryCallback([a1, a2, a3, a4, a5, a6]) {
/// Restore original pushState callback.
history["pushState"] = originalCallback;
}
/// Replace current callback.
history["pushState"] = temporaryCallback;
} |
This does not solve the issue. 😿 |
|
This helped me solve the same problem And add this script to index.html |
I thought the same thing too, but I figured on the emulator it does not appear as often because we tend to swipe from the left side within the screen. The error described above only occurs when you swipe from outside the screen, whiche happens more easy when using a real device. The problem also exists with go_router, if someone comes across this. Here is a minimal working example to reproduce the bug: |
|
@NikitaPolyakov11 thank you for your work and your feedback. But this solution does not work. We are still waiting flutter to find a solution for this problem. |
|
bumping because it´s still occuring in Flutter 3.16.0 See #136455 for example project and video. |
|
i have the same problem at 3.16.5 |
|
I have the same issue also with a drawer |
I love U. |
|
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
The text was updated successfully, but these errors were encountered: