[web][html]Applying ShaderMask on gradients makes the gradient not render #99045
Description
Putting a ShaderMask on a Container with some gradient decorations, works fine on mobile, desktop, and the web (when viewed from desktop Chrome and Safari) but does not work on mobile browsers.
For example, a minimal reproducible code:
ShaderMask(
shaderCallback: (Rect bounds) {
return LinearGradient(
colors: [Colors.red, Colors.yellow],
).createShader(bounds);
},
child: Container(
width: 300,
height: 300,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.grey, Colors.white],
),
),
),
)
When viewed everywhere else, it looks fine:
But when viewed from mobile, for example on Chrome on Android 12 (and also tested on iOS, same problem), it looks like this:
Flutter doctor:
[✓] Flutter (Channel stable, 2.8.1, on macOS 12.1 21C52 darwin-arm, locale en-CA)
[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
[✓] Chrome - develop for the web
[!] Android Studio - Unable to find bundled Java version.
[✓] Android Studio (version 2020.3)
[✓] VS Code (version 1.64.2)
[✓] Connected device (3 available)