Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Flutter Web does not work on LibreWolf: Big padding at the bottom and no mouse clicks #147827

Open
nilsreichardt opened this issue May 4, 2024 · 1 comment
Labels
c: rendering UI glitches reported at the engine/skia rendering level e: web_canvaskit CanvasKit (a.k.a. Skia-on-WebGL) rendering backend for Web engine flutter/engine repository. See also e: labels. found in release: 3.19 Found to occur in 3.19 found in release: 3.22 Found to occur in 3.22 has reproducible steps The issue has been confirmed reproducible and is ready to work on platform-web Web applications specifically team-web Owned by Web platform team

Comments

@nilsreichardt
Copy link
Contributor

nilsreichardt commented May 4, 2024

A bug from one of our customers, see: https://discord.com/channels/545668860859252746/616181222577668106/1236252075550179399

Steps to reproduce

  1. Download the LibreWolf browser: https://librewolf.net/
  2. Run flutter create temp
  3. Run cd temp
  4. Run flutter run -d chrome
  5. Copy the URL from the Chrome browser and open it in the LibreWolf browser

Alternatively, you can just open https://flutter.github.io/samples/web/material_3_demo/ using the LibreWolf browser.

Expected results

Flutter app shouldn't have the offset at the bottom and should be able to register mouse clicks.

Actual results

Offset at the bottom and mouse clicks are ignored.

Code sample

Code sample

Use any Flutter code.

Screenshots or Video

Screenshots / Video demonstration

image

Logs

Logs
Loading from existing service worker. [flutter.js:3:660](https://flutter.github.io/samples/web/material_3_demo/flutter.js)
Service worker already active. [flutter.js:3:907](https://flutter.github.io/samples/web/material_3_demo/flutter.js)
Injecting <script> tag. Using callback. [flutter.js:3:1820](https://flutter.github.io/samples/web/material_3_demo/flutter.js)
Source map error: Error: request failed with status 404
Resource URL: https://flutter.github.io/samples/web/material_3_demo/flutter.js
Source Map URL: flutter.js.map

unreachable code after return statement
[main.dart.js:57002:1](https://flutter.github.io/samples/web/material_3_demo/main.dart.js)
unreachable code after return statement
[main.dart.js:57004:1](https://flutter.github.io/samples/web/material_3_demo/main.dart.js)
unreachable code after return statement
[main.dart.js:88699:1](https://flutter.github.io/samples/web/material_3_demo/main.dart.js)
Flutter Web Bootstrap: Programmatic. [main.dart.js:8310:22](https://flutter.github.io/samples/web/material_3_demo/main.dart.js)
{"domContentLoaded":284,"loadEntrypoint":316.67299999999994,"initializeEngine":366.6740000000001,"appRunnerRunApp":33.333999999999946} [main.dart.js:31848:78](https://flutter.github.io/samples/web/material_3_demo/main.dart.js)
{"firstFrame":850.017} [main.dart.js:31848:78](https://flutter.github.io/samples/web/material_3_demo/main.dart.js)
Failed to create WebGL context: WebGL is currently disabled. [main.dart.js:8310:22](https://flutter.github.io/samples/web/material_3_demo/main.dart.js)
Failed to create WebGL context: WebGL is currently disabled. [main.dart.js:8310:22](https://flutter.github.io/samples/web/material_3_demo/main.dart.js)
WARNING: Falling back to CPU-only rendering. WebGL support not detected. [main.dart.js:8310:22](https://flutter.github.io/samples/web/material_3_demo/main.dart.js)
Uncaught : Null check operator used on a null value
    $1 https://flutter.github.io/samples/web/material_3_demo/main.dart.js:104172
    ay3 https://flutter.github.io/samples/web/material_3_demo/main.dart.js:46495
    Mw https://flutter.github.io/samples/web/material_3_demo/main.dart.js:46498
    $0 https://flutter.github.io/samples/web/material_3_demo/main.dart.js:46251
    wN https://flutter.github.io/samples/web/material_3_demo/main.dart.js:6430
    vk https://flutter.github.io/samples/web/material_3_demo/main.dart.js:46182
    $0 https://flutter.github.io/samples/web/material_3_demo/main.dart.js:46077
    $0 https://flutter.github.io/samples/web/material_3_demo/main.dart.js:45894
    setTimeout handler*a8G https://flutter.github.io/samples/web/material_3_demo/main.dart.js:45880
    aYR https://flutter.github.io/samples/web/material_3_demo/main.dart.js:6317
    aFb https://flutter.github.io/samples/web/material_3_demo/main.dart.js:6313
    c9 https://flutter.github.io/samples/web/material_3_demo/main.dart.js:6507
    pA https://flutter.github.io/samples/web/material_3_demo/main.dart.js:6364
    $1 https://flutter.github.io/samples/web/material_3_demo/main.dart.js:104165
    ay3 https://flutter.github.io/samples/web/material_3_demo/main.dart.js:46495
    Mw https://flutter.github.io/samples/web/material_3_demo/main.dart.js:46498
    $0 https://flutter.github.io/samples/web/material_3_demo/main.dart.js:46251
    wN https://flutter.github.io/samples/web/material_3_demo/main.dart.js:6430
    vl https://flutter.github.io/samples/web/material_3_demo/main.dart.js:46186
    $0 https://flutter.github.io/samples/web/material_3_demo/main.dart.js:46222
    b_H https://flutter.github.io/samples/web/material_3_demo/main.dart.js:6462
    b_T https://flutter.github.io/samples/web/material_3_demo/main.dart.js:6464
    $1 https://flutter.github.io/samples/web/material_3_demo/main.dart.js:45864
    aY6 https://flutter.github.io/samples/web/material_3_demo/main.dart.js:6306
    <anonymous> https://flutter.github.io/samples/web/material_3_demo/main.dart.js:111031
    c https://flutter.github.io/samples/web/material_3_demo/main.dart.js:30
    aNW https://flutter.github.io/samples/web/material_3_demo/main.dart.js:6469
    rL https://flutter.github.io/samples/web/material_3_demo/main.dart.js:6532
    a9h https://flutter.github.io/samples/web/material_3_demo/main.dart.js:46193
    mU https://flutter.github.io/samples/web/material_3_demo/main.dart.js:46191
    fa https://flutter.github.io/samples/web/material_3_demo/main.dart.js:45905
    T https://flutter.github.io/samples/web/material_3_demo/main.dart.js:6327
    aBC https://flutter.github.io/samples/web/material_3_demo/main.dart.js:8679
    s https://flutter.github.io/samples/web/material_3_demo/main.dart.js:6337
    $2 https://flutter.github.io/samples/web/material_3_demo/main.dart.js:45919
    U https://flutter.github.io/samples/web/material_3_demo/main.dart.js:6323
    aBC https://flutter.github.io/samples/web/material_3_demo/main.dart.js:8680
    aCe https://flutter.github.io/samples/web/material_3_demo/main.dart.js:31839
    s https://flutter.github.io/samples/web/material_3_demo/main.dart.js:6337
    $2 https://flutter.github.io/samples/web/material_3_demo/main.dart.js:45919
    U https://flutter.github.io/samples/web/material_3_demo/main.dart.js:6323
    aCe https://flutter.github.io/samples/web/material_3_demo/main.dart.js:31841
    <anonymous> https://flutter.github.io/samples/web/material_3_demo/main.dart.js:111343
    <anonymous> https://flutter.github.io/samples/web/material_3_demo/main.dart.js:111339
    dartProgram https://flutter.github.io/samples/web/material_3_demo/main.dart.js:111341
    <anonymous> https://flutter.github.io/samples/web/material_3_demo/main.dart.js:111343

Flutter Doctor output

Doctor output
[✓] Flutter (Channel stable, 3.19.6, on macOS 14.3 23D56 darwin-arm64 (Rosetta), locale en-DE)
    • Flutter version 3.19.6 on channel stable at /Users/nils/fvm/versions/3.19.6
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 54e66469a9 (2 weeks ago), 2024-04-17 13:08:03 -0700
    • Engine revision c4cd48e186
    • Dart version 3.3.4
    • DevTools version 2.31.1

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
    • Android SDK at /Users/nils/Library/Android/sdk
    • Platform android-34, build-tools 33.0.1
    • 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.6b829.9-10027231)
    • All Android licenses accepted.

[!] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15E204a
    ✗ Unable to get list of installed Simulator runtimes.
    ! CocoaPods 1.12.1 out of date (1.13.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin
        usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see https://guides.cocoapods.org/using/getting-started.html#updating-cocoapods for instructions.

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio (version unknown)
    • Android Studio at /Applications/Android Studio Preview.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 determine Android Studio version.
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] Android Studio (version 2022.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 17.0.6+0-17.0.6b829.9-10027231)

[✓] IntelliJ IDEA Community Edition (version 2023.1)
    • 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

[✓] IntelliJ IDEA Ultimate Edition (version 2022.2.3)
    • IntelliJ at /Users/nils/Library/Application Support/JetBrains/Toolbox/apps/IDEA-U/ch-0/222.4345.14/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.89.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.88.0

[✓] VS Code (version 1.82.0-insider)
    • VS Code at /Applications/Visual Studio Code - Insiders.app/Contents
    • Flutter extension version 3.70.0

[✓] Connected device (3 available)
    • Nils’s iPhone (mobile) • 00008110-00042D6011D3801E • ios            • iOS 17.4.1 21E236
    • macOS (desktop)        • macos                     • darwin-arm64   • macOS 14.3 23D56 darwin-arm64 (Rosetta)
    • Chrome (web)           • chrome                    • web-javascript • Google Chrome 124.0.6367.119

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 2 categories.
@danagbemava-nc danagbemava-nc added the in triage Presently being triaged by the triage team label May 6, 2024
@danagbemava-nc
Copy link
Member

Reproducible using the browser and steps outlined above.

In my testing, this was only an issue with the canvaskit renderer. HTML seemed to work just fine.

HTML Canvaskit
Screenshot 2024-05-06 at 08 43 39 Screenshot 2024-05-06 at 08 44 50
flutter doctor -v
[✓] Flutter (Channel stable, 3.19.6, on macOS 14.4.1 23E224 darwin-arm64, locale en-GB)
    • Flutter version 3.19.6 on channel stable at /Users/nexus/dev/sdks/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 54e66469a9 (3 weeks ago), 2024-04-17 13:08:03 -0700
    • Engine revision c4cd48e186
    • Dart version 3.3.4
    • DevTools version 2.31.1

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Users/nexus/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode-15.3.0.app/Contents/Developer
    • Build 15E204a
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.1)
    • Android Studio at /Users/nexus/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.7+0-17.0.7b1000.6-10550314)

[✓] IntelliJ IDEA Ultimate Edition (version 2023.2.5)
    • IntelliJ at /Users/nexus/Applications/IntelliJ IDEA Ultimate.app
    • Flutter plugin version 77.2.2
    • Dart plugin version 232.10286

[✓] VS Code (version 1.88.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.88.0

[✓] Connected device (3 available)
    • Dean’s iPad (mobile) • 00008103-000825C811E3401E • ios            • iOS 17.4.1 21E236
    • macOS (desktop)      • macos                     • darwin-arm64   • macOS 14.4.1 23E224 darwin-arm64
    • Chrome (web)         • chrome                    • web-javascript • Google Chrome 124.0.6367.119
    ! Error: Browsing on the local area network for Nexus. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)

[✓] Network resources
    • All expected network resources are available.

• No issues found!
[!] Flutter (Channel master, 3.22.0-23.0.pre.44, on macOS 14.4.1 23E224 darwin-arm64, locale en-GB)
    • Flutter version 3.22.0-23.0.pre.44 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 f6c8cc3fa0 (3 hours ago), 2024-05-06 01:57:33 -0400
    • Engine revision c73fd390d1
    • Dart version 3.5.0 (build 3.5.0-131.0.dev)
    • DevTools version 2.35.0
    • 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 34.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Users/nexus/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode-15.3.0.app/Contents/Developer
    • Build 15E204a
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.1)
    • Android Studio at /Users/nexus/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.7+0-17.0.7b1000.6-10550314)

[✓] IntelliJ IDEA Ultimate Edition (version 2023.2.5)
    • IntelliJ at /Users/nexus/Applications/IntelliJ IDEA Ultimate.app
    • Flutter plugin version 77.2.2
    • Dart plugin version 232.10286

[✓] VS Code (version 1.88.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.88.0

[✓] Connected device (4 available)
    • Dean’s iPad (mobile)            • 00008103-000825C811E3401E • ios            • iOS 17.4.1 21E236
    • macOS (desktop)                 • macos                     • darwin-arm64   • macOS 14.4.1 23E224 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad     • darwin         • macOS 14.4.1 23E224 darwin-arm64
    • Chrome (web)                    • chrome                    • web-javascript • Google Chrome 124.0.6367.119
    ! Error: Browsing on the local area network for Nexus. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

@danagbemava-nc danagbemava-nc added platform-web Web applications specifically c: rendering UI glitches reported at the engine/skia rendering level e: web_canvaskit CanvasKit (a.k.a. Skia-on-WebGL) rendering backend for Web has reproducible steps The issue has been confirmed reproducible and is ready to work on team-web Owned by Web platform team found in release: 3.19 Found to occur in 3.19 found in release: 3.22 Found to occur in 3.22 engine flutter/engine repository. See also e: labels. and removed in triage Presently being triaged by the triage team labels May 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
c: rendering UI glitches reported at the engine/skia rendering level e: web_canvaskit CanvasKit (a.k.a. Skia-on-WebGL) rendering backend for Web engine flutter/engine repository. See also e: labels. found in release: 3.19 Found to occur in 3.19 found in release: 3.22 Found to occur in 3.22 has reproducible steps The issue has been confirmed reproducible and is ready to work on platform-web Web applications specifically team-web Owned by Web platform team
Projects
None yet
Development

No branches or pull requests

2 participants