IOS Facebook\Instagram WebView bottom bar overlaps FAB

[ranulfo]

Is there an existing issue for this?

• [X] I have searched the existing issues
• [X] I have read the guide to filing a bug

Steps to reproduce

1. Create a flutter web project with FAB and extendBodyBehindAppBar
2. Start this project as a local server flutter run -d web-server --web-hostname 192.168.0.6 --web-port 80 --web-renderer html
3. Put generated link in your facebook or instagram home page.
4. Click this link to open project inside instagram webview

Expected results

It should show normal and working UI

Actual results

It shows broken UI (Not 100% reproduce, random rate) only in IOS instagram WebView, when i open it through safari or chrome this issue don't appear.

Code sample

Code sample

```dart //flutter run -d web-server --web-hostname 192.168.0.6 --web-port 80 --web-renderer html import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; import 'package:web_browser_detect/web_browser_detect.dart'; import 'package:responsive_framework/responsive_framework.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( colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), useMaterial3: false, ), home: const MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({super.key, required this.title}); final String title; @override State createState() => _MyHomePageState(); } class _MyHomePageState extends State { @override Widget build(BuildContext context) { Size size = MediaQuery.of(context).size; bool? resizeToAvoidBottomInset; String browserName = ""; if (kIsWeb) { final browser = Browser(); //print('-->${browser.browser} ${browser.version}'); browserName = browser.browser; resizeToAvoidBottomInset = browser.browser.toLowerCase().contains("safari") ? true : false; } final isMobile = true; //ResponsiveWrapper.of(context).isMobile; //final double appBarHeight = isMobile ? 15.h : 30.h; final double appBarHeight = isMobile ? MediaQuery.of(context).size.height * 0.15 : MediaQuery.of(context).size.height * 0.3; return SafeArea( child: Scaffold( resizeToAvoidBottomInset: false, extendBodyBehindAppBar: true, extendBody: true, appBar: PreferredSize( preferredSize: Size(double.infinity, appBarHeight), child: Container( height: appBarHeight, child: Text("appbar"), )), /*ppBar( title: Text("AppBar"),),*/ body: ListView( children: [ Container( padding: null, child: Column( children: [ Padding( padding: EdgeInsets.symmetric(horizontal: 32), child: Column( children: [ Padding( padding: const EdgeInsets.all(8.0), child: Container( height: size.height * 0.5, color: Colors.amber, child: Text("espaço 1"), ), ), Padding( padding: const EdgeInsets.all(8.0), child: Container( height: size.height * 0.5, color: Colors.blue, child: Text("espaço 2"), ), ), ListView( //physics: NeverScrollableScrollPhysics(), shrinkWrap: true, children: [ Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( '$browserName', ), Text( ' text', style: Theme.of(context) .textTheme .headlineMedium, ), ], ), ), ], ), ], ), ), Container( color: Colors.green, child: Text("footer"), ), ], ), ), ], ), floatingActionButton: FloatingActionButton( onPressed: () { ; }, child: FaIcon( FontAwesomeIcons.whatsapp, //color: textPrimary, size: 30, ), ), bottomSheet: SizedBox .shrink() /*SafeArea( child: Container( padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 8.0), height: MediaQuery.of(context).size.height * 0.2, child: Center( child: Text("bottom sheet!"), )), ),*/ ), ); } } ```

Screenshots or Video

Screenshots / Video demonstration

When i clean cache and open link in first time:  When i refresh page several times its work: 

Logs

Logs

```console [Paste your logs here] ```

Flutter Doctor output

Doctor output

```console base) ranulfosouza@Ranulfos-MacBook-Air teste_safe_area % flutter doctor -v [✓] Flutter (Channel stable, 3.10.5, on macOS 13.5 22G74 darwin-arm64, locale en-BR) • Flutter version 3.10.5 on channel stable at /Users/ranulfosouza/development/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 796c8ef792 (9 weeks ago), 2023-06-13 15:51:02 -0700 • Engine revision 45f6e00911 • Dart version 3.0.5 • DevTools version 2.23.1 [✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1) • Android SDK at /Users/ranulfosouza/Library/Android/sdk • Platform android-33, build-tools 33.0.1 • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 14.3.1) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 14E300c • CocoaPods version 1.11.3 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2021.2) • 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.12+0-b1504.28-7817840) [✓] VS Code (version 1.80.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.70.0 [✓] Connected device (3 available) • iPhone (mobile) • 832806649ffd507f0dc4d114bf99052f27163f97 • ios • iOS 15.7.1 19H117 • macOS (desktop) • macos • darwin-arm64 • macOS 13.5 22G74 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 115.0.5790.170 [✓] Network resources • All expected network resources are available. • No issues found! ```

[dam-ease]

Hi @ranulfo. Thanks for filing this issue. I can't seem to reproduce this on my end. Can you upgrade to the latest versions to confirm this issue still persists? If it does, can you provide more info on

Put generated link in your facebook or instagram home page

Opening the link seems to work fine on my end. Thank you.

[ranulfo]

I updated flutter to version 3.13 but this error keeps appearing. I should point out that this error also appears in the bottomsheet, see the bottom button inside the scafold bottomSheet:

Thanks for your interaction.

[dam-ease]

Hi @ranulfo. Thanks for your response. This might be device-specific, I tested on an iPhone X (iOS 16.6), added the link to my Instagram profile and clicked to view in app and I can't see the overlap as it shows as expected. Can you provide more details on the device you are testing with or any reproduction steps I might be missing out on.

stable, master flutter doctor -v

``` [✓] Flutter (Channel stable, 3.13.0, on macOS 13.0 22A380 darwin-arm64, locale en-NG) • Flutter version 3.13.0 on channel stable at /Users/damilolaalimi/sdks/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision efbf63d9c6 (2 days ago), 2023-08-15 21:05:06 -0500 • Engine revision 1ac611c64e • Dart version 3.1.0 • DevTools version 2.25.0 [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/damilolaalimi/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • ANDROID_HOME = /Users/damilolaalimi/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 14.3.1) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 14E300c • CocoaPods version 1.12.1 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2022.2) • 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 17.0.6+0-17.0.6b802.4-9586694) [✓] VS Code (version 1.81.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.50.0 [✓] Connected device (3 available) • iPhone 8 (mobile) • 218697C0-911E-4F4E-9568-C387ACB184ED • ios • com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator) • macOS (desktop) • macos • darwin-arm64 • macOS 13.0 22A380 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 115.0.5790.170 [✓] Network resources • All expected network resources are available. • No issues found! ``` ``` [✓] Flutter (Channel master, 3.14.0-7.0.pre.20, on macOS 13.0 22A380 darwin-arm64, locale en-NG) • Flutter version 3.14.0-7.0.pre.20 on channel master at /Users/damilolaalimi/fvm/versions/master • Upstream repository https://github.com/flutter/flutter.git • Framework revision 633b1ce402 (4 hours ago), 2023-08-18 00:00:25 -0400 • Engine revision 58f7d8ee3e • Dart version 3.2.0 (build 3.2.0-84.0.dev) • DevTools version 2.26.1 [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/damilolaalimi/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • ANDROID_HOME = /Users/damilolaalimi/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 14.3.1) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 14E300c • CocoaPods version 1.12.1 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2022.2) • 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 17.0.6+0-17.0.6b802.4-9586694) [✓] VS Code (version 1.81.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.50.0 [✓] Connected device (2 available) • macOS (desktop) • macos • darwin-arm64 • macOS 13.0 22A380 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 115.0.5790.170 [✓] Network resources • All expected network resources are available. • No issues found! ```

[ranulfo]

Thanks again for your help. Can you clear the webview cache and try again? The IPhone version I'm testing is: Iphone 7 iOS 15.7.1

[dam-ease]

Hi @ranulfo. Thanks for your response. I have cleared webview cache and tried again, still can't reproduce. Also tried it on an iPhone 7, iOS 15.7.2 and it works as expected. Does this also happen with canvaskit or only with html renderer? Also, the current code sample attached contains third-party packages that don't seem to be relevant in reproducing the issue, can you remove them, retry this and also share the code sample? Thank you!

[ranulfo]

I removed all third party packages and the problem still appears. The code was compiled using html renderer

//sudo flutter run -d web-server --web-hostname 192.168.1.6 --web-port 80 --web-renderer html
import 'package:flutter/foundation.dart';
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(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: false,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;

    final double appBarHeight = MediaQuery.of(context).size.height * 0.15;

    return SafeArea(
      child: Scaffold(
        resizeToAvoidBottomInset: false,
        extendBodyBehindAppBar: true,
        extendBody: true,
        appBar: PreferredSize(
            preferredSize: Size(double.infinity, appBarHeight),
            child: Container(
              height: appBarHeight,
              child: Text("appbar"),
            )),
        body: ListView(
          children: [
            Container(
              padding: null,
              child: Column(
                children: [
                  Padding(
                    padding: EdgeInsets.symmetric(horizontal: 32),
                    child: Column(
                      children: [
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Container(
                            height: size.height * 0.5,
                            color: Colors.amber,
                            child: Text("espaço 1"),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Container(
                            height: size.height * 0.5,
                            color: Colors.blue,
                            child: Text("espaço 2"),
                          ),
                        ),
                        ListView(
                          //physics: NeverScrollableScrollPhysics(),
                          shrinkWrap: true,
                          children: [
                            Center(
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: <Widget>[
                                  Text(
                                    ' Text 1',
                                  ),
                                  Text(
                                    ' Text 2',
                                    style: Theme.of(context)
                                        .textTheme
                                        .headlineMedium,
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                  Container(
                    color: Colors.green,
                    child: Text("footer"),
                  ),
                ],
              ),
            ),
          ],
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            ;
          },
          child: const Icon(
            Icons.favorite,
            size: 30,
          ),
        ),
        bottomSheet: null,
      ),
    );
  }
}

[dam-ease]

Hi @ranulfo. Thanks for your patience. please can you try with canvaskit renderer to see if this reproduces?

[ranulfo]

ohhh \o/ this problem does not occur when using canvaskit. Does that mean we found point x of the problem? However, my real project needs to be compiled in hmtl for correct functioning of other packages

[dam-ease]

Thanks for your response and for confirming this @ranulfo. Although I can't reproduce on my end (I tested both on iPhone X, 16.6 and iPhone 7, iOS 15.7.2), I'd label for more insights.

Repro Code Sample

``` //sudo flutter run -d web-server --web-hostname 192.168.1.6 --web-port 80 --web-renderer html import 'package:flutter/foundation.dart'; 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( colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), useMaterial3: false, ), home: const MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({super.key, required this.title}); final String title; @override State createState() => _MyHomePageState(); } class _MyHomePageState extends State { @override Widget build(BuildContext context) { Size size = MediaQuery.of(context).size; final double appBarHeight = MediaQuery.of(context).size.height * 0.15; return SafeArea( child: Scaffold( resizeToAvoidBottomInset: false, extendBodyBehindAppBar: true, extendBody: true, appBar: PreferredSize( preferredSize: Size(double.infinity, appBarHeight), child: Container( height: appBarHeight, child: Text("appbar"), )), body: ListView( children: [ Container( padding: null, child: Column( children: [ Padding( padding: EdgeInsets.symmetric(horizontal: 32), child: Column( children: [ Padding( padding: const EdgeInsets.all(8.0), child: Container( height: size.height * 0.5, color: Colors.amber, child: Text("espaço 1"), ), ), Padding( padding: const EdgeInsets.all(8.0), child: Container( height: size.height * 0.5, color: Colors.blue, child: Text("espaço 2"), ), ), ListView( //physics: NeverScrollableScrollPhysics(), shrinkWrap: true, children: [ Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( ' Text 1', ), Text( ' Text 2', style: Theme.of(context) .textTheme .headlineMedium, ), ], ), ), ], ), ], ), ), Container( color: Colors.green, child: Text("footer"), ), ], ), ), ], ), floatingActionButton: FloatingActionButton( onPressed: () { ; }, child: const Icon( Icons.favorite, size: 30, ), ), bottomSheet: null, ), ); } } ```

stable, master flutter doctor -v

``` [✓] Flutter (Channel stable, 3.13.2, on macOS 13.0 22A380 darwin-arm64, locale en-NG) • Flutter version 3.13.2 on channel stable at /Users/damilolaalimi/sdks/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision ff5b5b5fa6 (7 days ago), 2023-08-24 08:12:28 -0500 • Engine revision b20183e040 • Dart version 3.1.0 • DevTools version 2.25.0 [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/damilolaalimi/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • ANDROID_HOME = /Users/damilolaalimi/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 14.3.1) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 14E300c • CocoaPods version 1.12.1 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2022.2) • 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 17.0.6+0-17.0.6b802.4-9586694) [✓] VS Code (version 1.81.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.50.0 [✓] Connected device (4 available) • sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64 • Android 14 (API 34) (emulator) • iPhone 14 (mobile) • 1A122DE2-0CAB-4C3E-A395-691BF27D626F • ios • com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator) • macOS (desktop) • macos • darwin-arm64 • macOS 13.0 22A380 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 116.0.5845.110 [✓] Network resources • All expected network resources are available. • No issues found! ``` ``` [✓] Flutter (Channel master, 3.14.0-9.0.pre.117, on macOS 13.0 22A380 darwin-arm64, locale en-NG) • Flutter version 3.14.0-9.0.pre.117 on channel master at /Users/damilolaalimi/fvm/versions/master • Upstream repository https://github.com/flutter/flutter.git • Framework revision 2e075d000b (6 hours ago), 2023-08-28 02:12:15 -0400 • Engine revision 78c26aeff3 • Dart version 3.2.0 (build 3.2.0-97.0.dev) • DevTools version 2.26.2 [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/damilolaalimi/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • ANDROID_HOME = /Users/damilolaalimi/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 14.3.1) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 14E300c • CocoaPods version 1.12.1 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2022.2) • 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 17.0.6+0-17.0.6b802.4-9586694) [✓] VS Code (version 1.81.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.50.0 [✓] Connected device (4 available) • sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64 • Android 14 (API 34) (emulator) • iPhone 14 (mobile) • 1A122DE2-0CAB-4C3E-A395-691BF27D626F • ios • com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator) • macOS (desktop) • macos • darwin-arm64 • macOS 13.0 22A380 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 116.0.5845.110 [✓] Network resources • All expected network resources are available. • No issues found! ```

[yjbanov]

This looks like an issue that affects more than just Flutter: https://stackoverflow.com/questions/70944973/is-there-a-way-to-find-instagram-webview-bottom-navigation-bar-is-visible-or-not. But maybe we can do something about it. So will keep this issue open.

[ranulfo]

A customer using an Iphone 13 IOS 16.1 reported this bug again, and I still don't know how to resolve it