[Bug report] Black bars when using in mobile browser.

[iamfirdous]

Version

3.0.1

Platforms

Web - Only in mobile browser

Device Model

Samsung Galaxy S22 Ultra

Flutter info

[✓] Flutter (Channel stable, 3.19.5, on macOS 14.4.1 23E224 darwin-arm64, locale en-US)
    • Flutter version 3.19.5 on channel stable at /Users/firdous.ismail/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 300451adae (3 weeks ago), 2024-03-27 21:54:07 -0500
    • Engine revision e76c956498
    • Dart version 3.3.3
    • DevTools version 2.31.1

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

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

[✗] Chrome - develop for the web (Cannot find Chrome executable at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.

[✓] Android Studio (version 2023.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.9+0-17.0.9b1087.7-11185874)

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

[✓] Connected device (2 available)
    • sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64 • Android 13 (API 33) (emulator)
    • macOS (desktop)             • macos         • darwin-arm64  • macOS 14.4.1 23E224 darwin-arm64

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

! Doctor found issues in 1 category.

How to reproduce?

The app is essentially unusable when the Tilt widget is active and running on any mobile browser, although it functions properly when tested on a desktop browser. For the first two Tilt widgets, all I can see are black bars, and below them, another card with a Tilt widget appears washed out. Moreover, none of the other widgets are visible. I tested on Edge mobile browser, and Samsung browser. I deployed using Firebase hosting, you can also test it yourself with below URL. I'll attach screenshots below.

Hosted using Firebase hosting here https://firdous.web.app

Mobile browser screenshot

Desktop browser screenshot (In inspect mode)

Minimal example code (optional)

Tilt(
  tiltConfig: const TiltConfig(angle: 12.0, enableGestureSensors: false),
  shadowConfig: ShadowConfig(disable: !shadow),
  borderRadius: BorderRadius.circular(radius),
  child: child,
);

I must say, it's a fantastic and incredibly helpful package. Thanks in advance.

[AmosHuKe]

Hi~ @iamfirdous Thank you for your time. 😄

Maybe the problem is that the web renderer is HTML.
It looks like your web renderer is using the default configuration:

renderer: auto
auto (default) - automatically chooses which renderer to use. This option chooses the HTML renderer when the app is running in a mobile browser, and CanvasKit renderer when the app is running in a desktop browser.

So mobile will use HTML.

Please try CanvasKit to see if this problem still occurs. You can configure it in web/index.html as follows:

......
<script>
    window.addEventListener('load', function(ev) {
    _flutter.loader.loadEntrypoint({
      serviceWorker: {
        serviceWorkerVersion: serviceWorkerVersion,
      },
      onEntrypointLoaded: function(engineInitializer) {
        // here
        let config = {
          renderer: "canvaskit",
        };
        engineInitializer.initializeEngine(config).then(function(appRunner) {
          appRunner.runApp();
          ......
        });
      }
    });
  });
</script>
......

And build the web like this:

$ flutter build web --web-renderer canvaskit --release

[iamfirdous]

@AmosHuKe That made a huge difference. I assume your package is designed to work with canvaskit on the web. Could you elaborate on the differences between the canvaskit and HTML renderers? One observation I made while using canvaskit is a slight jitter during the initial page scroll. Nevertheless, thanks a lot for your assistance.

[AmosHuKe]

@iamfirdous The Tilt widget relies heavily on Transform for some of its effects.

Unfortunately, Flutter's web platform has some weird rendering issues, whether it's CanvasKit or HTML (especially when using transform and canvas related widgets). 😂

I also reported an issue to Flutter about the Tilt widget turning black in HTML: https://github.com/flutter/flutter/issues/147129.

CanvasKit was chosen because it provides the most consistent rendering possible and reduces the risk of inconsistent rendering across browsers.

CanvasKit: This renderer is fully consistent with Flutter mobile and desktop, has faster performance with higher widget density, but adds about 1.5MB in download size. CanvasKit uses WebGL to render Skia paint commands.

[iamfirdous]

@AmosHuKe Thank you for the detailed clarification of the Tilt widget issue on mobile browsers. I also greatly appreciate your effort in raising the issue on Flutter GitHub. Your insights are invaluable for understanding the problem. I'm looking forward to seeing how it can be resolved to improve cross-platform usability. Since the issue is resolved for me, I'll go ahead and close it.

[AmosHuKe]

@iamfirdous Thanks again for your feedback and time!