Repository: flutter
Issue: [Web][iPadOS][Chrome]  Layout is broken when navigating to flutter website from external hyperlink. 
Labels: framework,platform-web,a: layout,P2,team-web,triaged-web

Hello everyone.
I think it's a bug, but I don't know how to fix it.
This issue has been isolated from:
[issue for iOS](https://github.com/flutter/flutter/issues/92655)
Thank you for your suggestions!
@danagbemava-nc 

*Memo: The issue below no longer occurs and has been removed from the test code(January 16, 2023.).

> First, my project has applied the following solutions to fix a WebGL 2.0 issue.
> [WebGL 2.0 issue](https://github.com/flutter/flutter/issues/89655)

This solution allows Safari to display the screen normally, but in Chrome the layout is broken.
Specifically, I have set BottomNavigationBar, but it is not displayed and the height of the drawn upper side content is longer than expected.

**Reproduction method**
iPadOS (15.0-15.1), Chrome (ver 95.0.4638.50)
When I open the web app screen "from a hyperlink on another HTML", the layout is broken.

I have created a page to reproduce this issue.
From your iPad, tap the link below to jump to a simple HTML site first.
https://flutter-issues-92655-testlink.web.app/
(The link has been updated on January 16, 2023.)

By tapping the 'Tap this link' there, you can reproduce the issues when tapping the link of the following format.
`<a href="target_link" target="_blank" rel="noopener noreferrer"> link </a>`

After this issue occurs, there is a way for the "user" to return the layout to normal:

1. Rotate the screen.
2. Tap the address bar of your browser to display the keyboard and then close it.

I haven't found a way to fix it programmatically.
I tried to delay execution of setState to redraw the screen, but it didn't work.
Also, this wasn't a BottomNavigationBar-specific issue, and creating similar layouts with tab or row widget had no effect.

**Rendering options**
Both break the layout.
flutter build web --web-renderer html
flutter build web --web-renderer canvaskit

<details>
<summary>flutter doctor -v</summary>

```console
[✓] Flutter (Channel stable, 2.5.3, on macOS 11.6 20G165 darwin-x64, locale ja-JP)
    • Flutter version 2.5.3 at /Users/morimasahide/documents/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 18116933e7 (13 days ago), 2021-10-15 10:46:35 -0700
    • Engine revision d3ea636dc5
    • Dart version 2.14.4

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at /Users/morimasahide/Library/Android/sdk
    • Platform android-29, build-tools 29.0.3
    • 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.1, Build version 13A1030d
    • CocoaPods version 1.10.1

[✓] 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)

[✓] IntelliJ IDEA Ultimate Edition (version 2021.2)
    • IntelliJ at /Applications/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

[✓] Connected device (1 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 95.0.4638.54

• No issues found!
```
</details>

<details>
<summary>sample code</summary>

```dart
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: TestHome(),
    );
  }
}
```

```dart
class TestHome extends StatefulWidget {
  TestHome({Key? key}) : super(key: key);

  @override
  _TestHomeState createState() => _TestHomeState();
}

class _TestHomeState extends State<TestHome> {

  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      this._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) {
    print("height:"+MediaQuery.of(context).size.height.toString());
    print("width:"+MediaQuery.of(context).size.width.toString());
    return WillPopScope(
        onWillPop: () {
          return Future.value(false);
        },
        child:Scaffold(
          body: Container(color: Colors.blue,),
          bottomNavigationBar: _getFooter(),
        )
    );
  }
}
```

</details>

<details>
<summary>Sample log acquisition result</summary>

Get Log, In Chrome on iPad 7th
`chrome://inspect`

**Bad layout(landscape)**
height: 790
width: 1080

**Correct layout(landscape)**
height: 695
width: 1080

</details>

Once i get the screen with Bad layout, I will always get the wrong height when moving on the navigator.
In other words, all subsequent screens after home will also be broken.

If I find anything else I would like to write here.
Thank you.