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.