Android Firefox, SingleChildScrollView create white space on top of page when scrolling up

[J-Siu]

Steps to Reproduce

1. On Android Firefox, go to : https://j-siu.github.io/app/flutter_scroll/#/
2. Scroll up and down

Expected results:

On Firefox, page should scroll up and down just like other web page.

Actual results:

On Firefox, when scroll up, a white section will show very briefly on top. This only happen with Flutter page.

Minimum to show issue

- Issue show even with appbar, see video at bottom - I changed the bg color to make it more visible repo: https://github.com/J-Siu/flutter_scroll ```dart import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { Widget text = const Text( 'text', style: TextStyle(backgroundColor: Colors.black, color: Colors.white), ); List children = []; for (int i = 0; i < 100; i++) { children.add(text); } return MaterialApp( title: 'Scroll', home: Scrollbar( child: SingleChildScrollView( child: ColoredBox( color: Colors.black, child: Center(child: Column(children: children)), ), ), ), ); } } ```

Logs

- This is not useful as it only show in mobile. Not seeing issue on desktop Firefox. [flutter_scroll.log](https://github.com/flutter/flutter/files/9331859/flutter_scroll.log) ``` Analyzing flutter_scroll... No issues found! (ran in 8.7s) ``` ``` $ flutter doctor -v [✓] Flutter (Channel stable, 3.0.5, on macOS 12.5 21G72 darwin-x64, locale en-CA) • Flutter version 3.0.5 at /usr/local/Caskroom/flutter/3.0.1/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision f1875d570e (4 weeks ago), 2022-07-13 11:24:16 -0700 • Engine revision e85ea0e79c • Dart version 2.17.6 • DevTools version 2.12.2 Checking Android licenses is taking an unexpectedly long time...[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1) • Android SDK at /Users/js/Library/Android/sdk • Platform android-32, build-tools 32.1.0-rc1 • 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 13.4.1) • Xcode at /Applications/Xcode.app/Contents/Developer • CocoaPods version 1.11.3 [✓] Chrome - develop for the web • CHROME_EXECUTABLE = /Users/js/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.70.1) • VS Code at /Users/js/Applications/Visual Studio Code.app/Contents • Flutter extension version 3.46.0 [✓] Connected device (2 available) • macOS (desktop) • macos • darwin-x64 • macOS 12.5 21G72 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 104.0.5112.79 [✓] HTTP Host Availability • All required HTTP hosts are available • No issues found! ```

https://user-images.githubusercontent.com/3171920/184503556-64c91ab5-29fe-4f80-89c7-71483ad975df.mp4

[maheshj01]

Hi @J-Siu, Thanks for filing the issue. Can you please share the version of the Firefox browser and the device you are using? I tried to reproduce it on Xiaomi Redmi k20 pro on latest version of firefox 103.2.0 build #2015895963 and I was not able to reproduce the issue. Also, this is not reproducible in the chrome browser too.

Additionally please check if the issue reproduces with this sample app https://flutterlistview.netlify.app/

https://user-images.githubusercontent.com/31410839/184630505-77f49baf-8b6b-4344-b04d-fdaa5ba6ac38.mov

[J-Siu]

@maheshmnj I can reproduce it on both Firefox 103 and 104(beta) on Android.

[J-Siu]

https://user-images.githubusercontent.com/3171920/184635520-97fa217f-a971-4d8f-943e-1b08c58d2af3.mp4

[maheshj01]

Thanks for the update @J-Siu, I am unable to reproduce the issue neither on beta nor on stable version of firefox for both of the sample apps. Can you please share which Android device is this issue on? Also Is this happening only in firefox or other browsers too?

Thanks

[J-Siu]

@maheshmnj My android device is OnePlus 6T.

Not seeing the issue on other browser nor device. I think the issue show up for Firefox on android is because it is the only mobile browser can detect flutter page movement and hide search bar. Other mobile browser, including Firefox on iPad(not sure about iPhone), search bar won't hide for flutter page movement.

Btw, is your Firefox search bar hiding itself when scrolling?

[maheshj01]

@J-Siu Thanks for the info, The search bar never hides and it stays there.

https://user-images.githubusercontent.com/31410839/185301271-a2309121-8f8e-43f1-af8c-c544b638a575.mov

I am unable to reproduce the issue with the sample apps provided above so I won't be able to investigate further. Perhaps this is a device-specific issue. Labeling for further investigation from the team.

[J-Siu]

@maheshmnj Below is how to turn on:

[yjbanov]

Perhaps this needs physical hardware to reproduce.

[J-Siu]

@yjbanov @maheshmnj please check firefox setting as I post above. That option maybe off from a complete clean install.

[maheshj01]

@J-Siu I have that setting enabled by default, But I don't see the search bar hiding on scroll with flutter apps. Surprisingly it hides for non-flutter apps

https://user-images.githubusercontent.com/31410839/185555818-cbaf69b4-8e47-4399-bbc8-869dab9617ce.mov

[iqfareez]

Sorry to interrupt, I think the search bar not hiding issue is already tracked on https://github.com/flutter/flutter/issues/69529

[J-Siu]

@iqfareez that issue is for mobile chrome/WebKit base browser. Android Firefox do hide , but need to turn on option as I post above.

[J-Siu]

@maheshmnj If that option is on, hiding is normal, lol. Ok, I tested on another android tablet running android 9. And it has soft button at the bottom which cannot hide. Firefox cannot hide search bar with flutter page.

So even for Firefox to hide, I think it need certain android version and config. My phone is running android 11.

K20 pro factory default is android 9, can you test with emulator with Android 11 or above?

[maheshj01]

K20 pro factory default is android 9, can you test with emulator with Android 11 or above?

My Xiaomi k20 pro is running on Android 11.

[J-Siu]

Interesting 🤔 Can the soft button be disabled? That's the only difference I can think of.

[J-Siu]

I turned on soft button on my phone and Firefox can still hide search bar. I run out of idea🤦‍♂️

[Piinks]

This does not appear to be specific to the scrollbar, does it reproduce without one?

[J-Siu]

This does not appear to be specific to the scrollbar, does it reproduce without one?

'SingleChildScrollView' to be specific. Not sure about other scrollable widget or other way to may the screen scroll. I only use this one so far.