[Web HTML] RadialGradient is rendered incorrectly when a Transform is applied

[AmosHuKe]

Steps to reproduce

Use code sample

Flutter: v3.19.6
Browser: Chrome (v123.0.6312.59)

Expected results

Display normally in the web (HTML)

Actual results

✅ CanvasKit	❌ HTML

Code sample

Code sample

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: Demo());
  }
}

class Demo extends StatelessWidget {
  const Demo({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Transform(
        alignment: AlignmentDirectional.center,
        transform: Matrix4.identity()
          ..setEntry(3, 2, 0.001)
          ..rotateX(10)
          ..rotateY(10),
        child: Stack(
          alignment: AlignmentDirectional.center,
          children: [
            Container(
              width: 300,
              height: 300,
              color: const Color(0xFF13547a),
            ),
            Container(
              width: 200,
              height: 200,
              decoration: BoxDecoration(
                gradient: RadialGradient(
                  colors: [
                    Colors.white.withOpacity(0.5),
                    Colors.white.withOpacity(0),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

[√] Flutter (Channel stable, 3.19.6, on Microsoft Windows [版本 10.0.22621.3296], locale zh-CN)
    • Flutter version 3.19.6 on channel stable at xx
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 54e66469a9 (3 days ago), 2024-04-17 13:08:03 -0700
    • Engine revision c4cd48e186
    • Dart version 3.3.4
    • DevTools version 2.31.1

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at xx
    • Platform android-34, build-tools 34.0.0
    • ANDROID_SDK_ROOT = xx
    • Java binary at: xx
    • Java version OpenJDK Runtime Environment (build 17.0.9+0--11185874)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at xx

[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.9.6)
    • Visual Studio at xx
    • Visual Studio Community 2022 version 17.9.34728.123
    • Windows 10 SDK version 10.0.19041.0

[√] Android Studio (version 2023.2)
    • Android Studio at xx
    • 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
    • android-studio-dir = xx
    • Java version OpenJDK Runtime Environment (build 17.0.9+0--11185874)

[√] IntelliJ IDEA Ultimate Edition (version 2024.1)
    • IntelliJ at xx
    • Flutter plugin version 79.0.3
    • Dart plugin version 241.15845

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [版本 10.0.22621.3296]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 123.0.6312.59
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 123.0.2420.97

[danagbemava-nc]

Reproducible using the code sample provided above.

With Transform	No Transform

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
    ! Warning: `flutter` on your path resolves to /Users/nexus/dev/sdks/flutters/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutter. Consider adding /Users/nexus/dev/sdks/flutter/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/nexus/dev/sdks/flutters/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutter. Consider adding /Users/nexus/dev/sdks/flutter/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 54e66469a9 (5 days ago), 2024-04-17 13:08:03 -0700
    • Engine revision c4cd48e186
    • Dart version 3.3.4
    • DevTools version 2.31.1
    • 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.86.0

[✓] Connected device (5 available)
    • Pixel 7 (mobile)     • adb-28291FDH2001SA-5Lv71w._adb-tls-connect._tcp. • android-arm64  • Android 14 (API 34)
    • Nexus (mobile)       • 00008020-001875E83A38002E                        • ios            • iOS 17.4.1 21E236
    • 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.60

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

! Doctor found issues in 1 category.

[✓] Flutter (Channel master, 3.22.0-14.0.pre.67, on macOS 14.4.1 23E224 darwin-arm64, locale en-GB)
    • Flutter version 3.22.0-14.0.pre.67 on channel master at /Users/nexus/dev/sdks/flutters
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 1a905d508d (22 hours ago), 2024-04-21 06:44:23 -0400
    • Engine revision 75ca2195c9
    • Dart version 3.5.0 (build 3.5.0-83.0.dev)
    • DevTools version 2.35.0-dev.8

[✓] 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.86.0

[✓] Connected device (6 available)
    • Pixel 7 (mobile)                • adb-28291FDH2001SA-5Lv71w._adb-tls-connect._tcp. • android-arm64  • Android 14 (API 34)
    • Nexus (mobile)                  • 00008020-001875E83A38002E                        • ios            • iOS 17.4.1 21E236
    • 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.60

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

• No issues found!