flutter/flutter

[web][html]Applying `ShaderMask` on gradients makes the gradient not render

h65wang opened this issue · 6 comments

h65wang commented

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:

image

But when viewed from mobile, for example on Chrome on Android 12 (and also tested on iOS, same problem), it looks like this:

image

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)

danagbemava-nc commented

Hi @h65wang, please provide a complete reproducible sample we can run without having to make any changes, preferably without any third-party packages.

Thank you.

h65wang commented

@danagbemava-nc Sure, just put my minimal reproducible code in a runApp() like this:

import 'package:flutter/material.dart';

void main() {
  runApp(
    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],
          ),
        ),
      ),
    ),
  );
}

How to test:

  1. build a web release version using: flutter build web
  2. host the web version somewhere
  3. access it from a desktop browser (it works fine)
  4. access it from a mobile browser (it's a black page; I've tested Chrome on Android 12 and iOS 15).

It might be easier to test it by running it as flutter web-server, if you have that enabled.

h65wang commented

It just hit me: the main difference between Desktop and Mobile browsers is that, by default, Flutter Web automatically detects the platform and chooses to use either canvas kit or html renderer.

Therefore, this issue is actually a html renderer issue. It works with canvas kit. So I changed the issue title.

To reproduce, force it to run with html renderer: flutter run -d chrome --web-renderer html and it will crash.

danagbemava-nc commented

Issue is reproducible on stable and master.

When running in debug mode, an error is thrown and nothing is rendered in the browser. Whereas running in release mode, just a black square is drawn.
This works as expected using the canvaskit renderer.

screenshots
HTML Canvaskit
Screenshot 2022-02-28 at 06 41 47 Screenshot 2022-02-28 at 06 42 13
code sample 
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Builder(builder: (context) {
        return Scaffold(
          body: 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],
                ),
              ),
            ),
          ),
        );
      }),
    ),
  );
}
flutter doctor -v 
[✓] Flutter (Channel stable, 2.10.2, on macOS 12.2 21D49 darwin-arm, locale en-GB)
    • Flutter version 2.10.2 at /Users/nexus/dev/sdks/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 097d3313d8 (9 days ago), 2022-02-18 19:33:08 -0600
    • Engine revision a83ed0e5e3
    • Dart version 2.16.1
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-32, build-tools 31.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.2

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

[✓] Android Studio (version 2021.1)
    • 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.11+0-b60-7772763)

[☠] IntelliJ IDEA Community Edition (the doctor check crashed)
    ✗ Due to an error, the doctor check did not complete. If the error message below is not helpful, please let us know about this issue at https://github.com/flutter/flutter/issues.
    ✗ FormatException: Unexpected extension byte (at offset 5)
    • #0      _Utf8Decoder.convertSingle (dart:convert-patch/convert_patch.dart:1789:7)
      #1      Utf8Decoder.convert (dart:convert/utf.dart:351:42)
      #2      InputStream.readString (package:archive/src/util/input_stream.dart:207:30)
      #3      new ZipDirectory.read (package:archive/src/zip/zip_directory.dart:40:30)
      #4      ZipDecoder.decodeBuffer (package:archive/src/zip_decoder.dart:19:30)
      #5      ZipDecoder.decodeBytes (package:archive/src/zip_decoder.dart:14:12)
      #6      IntelliJPlugins._findPluginXml (package:flutter_tools/src/intellij/intellij.dart:130:44)
      #7      IntelliJPlugins._readPackageVersion (package:flutter_tools/src/intellij/intellij.dart:141:40)
      #8      IntelliJPlugins.validatePackage (package:flutter_tools/src/intellij/intellij.dart:63:35)
      #9      IntelliJValidator.validate (package:flutter_tools/src/intellij/intellij_validator.dart:103:15)
      #10     asyncGuard.<anonymous closure> (package:flutter_tools/src/base/async_guard.dart:111:32)
      #11     asyncGuard.<anonymous closure> (package:flutter_tools/src/base/async_guard.dart:109:18)
      #12     _rootRun (dart:async/zone.dart:1426:13)
      #13     _CustomZone.run (dart:async/zone.dart:1328:19)
      #14     _runZoned (dart:async/zone.dart:1861:10)
      #15     runZonedGuarded (dart:async/zone.dart:1849:12)
      #16     runZoned (dart:async/zone.dart:1780:12)
      #17     asyncGuard (package:flutter_tools/src/base/async_guard.dart:109:3)
      #18     Doctor.startValidatorTasks (package:flutter_tools/src/doctor.dart:205:9)
      #19     Doctor.diagnose (package:flutter_tools/src/doctor.dart:309:47)
      #20     DoctorCommand.runCommand (package:flutter_tools/src/commands/doctor.dart:50:48)
      #21     FlutterCommand.verifyThenRunCommand (package:flutter_tools/src/runner/flutter_command.dart:1320:12)
      <asynchronous suspension>
      #22     FlutterCommand.run.<anonymous closure> (package:flutter_tools/src/runner/flutter_command.dart:1161:27)
      <asynchronous suspension>
      #23     AppContext.run.<anonymous closure> (package:flutter_tools/src/base/context.dart:150:19)
      <asynchronous suspension>
      #24     CommandRunner.runCommand (package:args/command_runner.dart:209:13)
      <asynchronous suspension>
      #25     FlutterCommandRunner.runCommand.<anonymous closure> (package:flutter_tools/src/runner/flutter_command_runner.dart:281:9)
      <asynchronous suspension>
      #26     AppContext.run.<anonymous closure> (package:flutter_tools/src/base/context.dart:150:19)
      <asynchronous suspension>
      #27     FlutterCommandRunner.runCommand (package:flutter_tools/src/runner/flutter_command_runner.dart:229:5)
      <asynchronous suspension>
      #28     run.<anonymous closure>.<anonymous closure> (package:flutter_tools/runner.dart:62:9)
      <asynchronous suspension>
      #29     AppContext.run.<anonymous closure> (package:flutter_tools/src/base/context.dart:150:19)
      <asynchronous suspension>
      #30     main (package:flutter_tools/executable.dart:94:3)
      <asynchronous suspension>


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

[✓] Connected device (3 available)
    • Nexus (mobile)  • 00008020-001875E83A38002E • ios            • iOS 15.3 19D50
    • macOS (desktop) • macos                     • darwin-arm64   • macOS 12.2 21D49 darwin-arm
    • Chrome (web)    • chrome                    • web-javascript • Google Chrome 98.0.4758.109

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.
[✓] Flutter (Channel master, 2.11.0-0.0.pre.697, on macOS 12.2 21D49 darwin-arm, locale en-GB)
    • Flutter version 2.11.0-0.0.pre.697 at /Users/nexus/dev/sdks/flutters
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision fc2a0847fb (43 minutes ago), 2022-02-28 01:01:17 -0500
    • Engine revision 05d1b5a66b
    • Dart version 2.17.0 (build 2.17.0-150.0.dev)
    • DevTools version 2.11.1

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-32, build-tools 31.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.2

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

[✓] Android Studio (version 2021.1)
    • 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.11+0-b60-7772763)

[✓] IntelliJ IDEA Community Edition (version 2021.3)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin version 213.5744.122

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

[✓] Connected device (3 available)
    • Nexus (mobile)  • 00008020-001875E83A38002E • ios            • iOS 15.3 19D50
    • macOS (desktop) • macos                     • darwin-arm64   • macOS 12.2 21D49 darwin-arm
    • Chrome (web)    • chrome                    • web-javascript • Google Chrome 98.0.4758.109

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

run_log.txt

eyebrowsoffire commented

This was fixed in the above PR.

  • 🚀1
github-actions commented

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.