search

flutter / flutter

Flutter makes it easy and fast to build beautiful apps for mobile and beyond
https://flutter.dev
BSD 3-Clause "New" or "Revised" License
165.22k stars 27.26k forks source link

[Web][HTML][chrome iOS] Layout is broken when navigating from external link #118605

Open TabooSun opened 1 year ago

TabooSun commented 1 year ago

Issue context

Similar to https://github.com/flutter/flutter/issues/92655 but it was closed by the author but I am still facing it in Flutter 3.3.10.

I used the Flutter Gallery Web App for testing and it can still be reproduced. Simply just drop this link in the iOS Note app and press the link to launch it up in Google Chrome. It works fine for the first time but if you launch it for the second time this issue occurs.

I tried forking and cloning the Flutter Gallery project and running it; the issue can still be reproduced. Here is my fork: https://github.com/TabooSun/Flutter.gallery/tree/2.9.3.

Steps to Reproduce

  1. Clone Flutter Gallery from https://github.com/TabooSun/Flutter.gallery/tree/2.9.3
  2. Build it
  3. Test it by opening port

Flutter Gallery Screen Recording

https://user-images.githubusercontent.com/31196825/212858202-fb31658d-fecd-4d72-a9e3-b2cba3ec11d7.mp4

Built Screen Recording

https://user-images.githubusercontent.com/31196825/212858476-beffaf92-80dc-4e27-82d5-ee692520c3f4.mp4

Logs ``` flutter doctor -v [✓] Flutter (Channel stable, 3.3.10, on macOS 13.1 22C65 darwin-arm, locale zh-Hans-MY) • Flutter version 3.3.10 on channel stable at /Users/taboosun/Development/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 135454af32 (5 weeks ago), 2022-12-15 07:36:55 -0800 • Engine revision 3316dd8728 • Dart version 2.18.6 • DevTools version 2.15.0 [✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0) • Android SDK at /Users/taboosun/Library/Android/sdk • Platform android-33, build-tools 33.0.0 • ANDROID_HOME = /Users/taboosun/Library/Android/sdk • Java binary at: /Users/taboosun/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.2) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 14C18 • CocoaPods version 1.11.3 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [!] Android Studio (version 2022.1) • Android Studio at /Users/taboosun/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9477386/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 ✗ Unable to find bundled Java version. • Try updating or re-installing Android Studio. [✓] Android Studio (version 2021.3) • Android Studio at /Users/taboosun/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) [✓] IntelliJ IDEA Ultimate Edition (version 2022.3.1) • IntelliJ at /Users/taboosun/Applications/JetBrains Toolbox/IntelliJ IDEA Ultimate.app • Flutter plugin version 71.3.6 • Dart plugin version 223.8214.16 [✓] IntelliJ IDEA Ultimate Edition (version 2022.3.1) • IntelliJ at /Users/taboosun/Library/Application Support/JetBrains/Toolbox/apps/IDEA-U/ch-0/223.8214.52/IntelliJ IDEA.app • 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 [✓] IntelliJ IDEA Ultimate Edition (version 2022.3) • IntelliJ at /Users/taboosun/Library/Application Support/JetBrains/Toolbox/apps/IDEA-U/ch-0/223.7571.182/IntelliJ IDEA.app • 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 [✓] VS Code (version 1.74.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.56.0 [✓] Connected device (2 available) • macOS (desktop) • macos • darwin-arm64 • macOS 13.1 22C65 darwin-arm • Chrome (web) • chrome • web-javascript • Google Chrome 109.0.5414.87 [✓] HTTP Host Availability • All required HTTP hosts are available ! Doctor found issues in 1 category. ```
danagbemava-nc commented 1 year ago

Hi @TabooSun, is this issue only with the chrome browser on iOS, or are you experiencing it with other browsers on iOS as well?

Can you also test on the master channel to see if this issue reproduces there?

TabooSun commented 1 year ago

It happens only in chrome browser on iOS, tried with Safari & Firefox, don't have such issue.

I tested all the above on master channel.

danagbemava-nc commented 1 year ago

Hi @TabooSun, I want to confirm something, did this reproduce when you built the webapp using the canvaskit renderer? Or did it reproduce only with the HTML renderer? (This is the default for mobile when you don't specify a renderer).

TabooSun commented 1 year ago

I didn't specify any renderer when I build, so it's auto.

danagbemava-nc commented 1 year ago

Hi @TabooSun, can you confirm if it reproduces when you use the canvaskit renderer? I cannot seem to reproduce it on my end

TabooSun commented 1 year ago

It never happened to me with canvaskit renderer, hence, this is how I did to my company project where I used canvaskit renderer to build for all the target platforms.

The reason I open this issue is to seek a fix for html renderer on Chrome iOS .

danagbemava-nc commented 1 year ago

I can reproduce the issue on the latest master and stable versions. I tested on the following browsers

Only Chrome exhibited this issue. See the recording below

This issue did not reproduce when the canvaskit renderer was used.

Steps to reproduce

This can also be done with the hosted version of flutter gallery.

recording https://user-images.githubusercontent.com/88313112/214233030-dfb3aa0c-6888-40af-98e8-ba45430c8194.MP4
minimal sample ```dart import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Test', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, fontFamily: "Noto Sans JP"), home: const TestHome(), ); } } class TestHome extends StatefulWidget { const TestHome({Key? key}) : super(key: key); @override State createState() => _TestHomeState(); } class _TestHomeState extends State { int _selectedIndex = 0; void _onItemTapped(int index) { setState(() { _selectedIndex = index; }); } Widget _getFooter() { return BottomNavigationBar( type: BottomNavigationBarType.fixed, items: [ BottomNavigationBarItem( icon: Icon( Icons.home, color: _selectedIndex == 0 ? Colors.black87 : Colors.black26, ), label: "Home", ), BottomNavigationBarItem( icon: Icon( Icons.account_circle, color: _selectedIndex == 1 ? Colors.black87 : Colors.black26, ), label: "account", ), BottomNavigationBarItem( icon: Icon( Icons.add, color: _selectedIndex == 2 ? Colors.black87 : Colors.black26, ), label: "add", ), ], currentIndex: _selectedIndex, onTap: _onItemTapped, backgroundColor: Colors.white, selectedItemColor: Colors.black45, unselectedItemColor: Colors.black26, ); } @override Widget build(BuildContext context) { return Scaffold( body: Container( color: Colors.blue, ), bottomNavigationBar: _getFooter(), ); } } ```
flutter doctor -v ``` [✓] Flutter (Channel stable, 3.3.10, on macOS 13.1 22C65 darwin-arm, locale en-GB) • Flutter version 3.3.10 on channel stable at /Users/nexus/dev/sdks/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 135454af32 (6 weeks ago), 2022-12-15 07:36:55 -0800 • Engine revision 3316dd8728 • Dart version 2.18.6 • 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: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 14.2) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 14C18 • CocoaPods version 1.11.3 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [!] Android Studio (version 2022.1) • 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 ✗ Unable to find bundled Java version. • Try updating or re-installing Android Studio. [!] Android Studio (version 2022.1) • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9477386/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 ✗ Unable to find bundled Java version. • Try updating or re-installing Android Studio. [✓] IntelliJ IDEA Community Edition (version 2022.2) • IntelliJ at /Applications/IntelliJ IDEA CE.app • 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 [✓] VS Code (version 1.74.3) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.56.0 [✓] Connected device (2 available) • macOS (desktop) • macos • darwin-arm64 • macOS 13.1 22C65 darwin-arm • Chrome (web) • chrome • web-javascript • Google Chrome 109.0.5414.87 [✓] HTTP Host Availability • All required HTTP hosts are available ! Doctor found issues in 2 categories. ``` ``` [!] Flutter (Channel master, 3.7.0-24.0.pre.87, on macOS 13.1 22C65 darwin-arm64, locale en-GB) • Flutter version 3.7.0-24.0.pre.87 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 c35efdaa68 (5 hours ago), 2023-01-24 02:57:00 +0100 • Engine revision 7d3233d26d • Dart version 3.0.0 (build 3.0.0-154.0.dev) • DevTools version 2.20.1 • 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: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 14.2) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 14C18 • CocoaPods version 1.11.3 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [!] Android Studio (version 2022.1) • 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 ✗ Unable to find bundled Java version. • Try updating or re-installing Android Studio. [!] Android Studio (version 2022.1) • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9477386/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 ✗ Unable to find bundled Java version. • Try updating or re-installing Android Studio. [✓] IntelliJ IDEA Community Edition (version 2022.2) • IntelliJ at /Applications/IntelliJ IDEA CE.app • 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 [✓] VS Code (version 1.74.3) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.56.0 [✓] Connected device (2 available) • macOS (desktop) • macos • darwin-arm64 • macOS 13.1 22C65 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 109.0.5414.87 [✓] HTTP Host Availability • All required HTTP hosts are available ! Doctor found issues in 3 categories. ```