[Web] Disposing a shader before Picture.toImage changes sampled pixels in Chrome #193221

Activity

1. mbcorona

   added

   in triagePresently being triaged by the triage teamPresently being triaged by the triage team

   platform-webWeb applications specificallyWeb applications specifically

   engineflutter/engine related. See also e: labels.flutter/engine related. See also e: labels.

   a: imagesLoading, displaying, rendering imagesLoading, displaying, rendering images

   c: renderingUI glitches reported at the engine/skia or impeller rendering levelUI glitches reported at the engine/skia or impeller rendering level

   team-webOwned by Web platform teamOwned by Web platform team

   and removed

   in triagePresently being triaged by the triage teamPresently being triaged by the triage team

   on Sep 23, 2026
2. mbcorona commented on Sep 25, 2026

   

   mbcorona

   on Sep 25, 2026

   Member

   More actions

   Thanks for reporting @traison-diedrich .
   routing to the web team for further investigation.

   👍React with 👍1Reacted by Traison
3. flutter-zl

   assigned

   harryterkelsen

   on Sep 30, 2026
4. flutter-zl

   added

   assigned for triageissue is assigned to a domain expert for further triageissue is assigned to a domain expert for further triage

   on Sep 30, 2026
5. vi-k commented on Oct 19, 2026

   

   vi-k

   on Oct 19, 2026

   Last edited by vi-k

   More actions

   This also happens on screen, not only with Picture.toImage, and I think I found the cause.

   Where it comes from. On CanvasKit, CkFragmentShader keeps its uniforms in WASM memory (mallocFloat32List) and passes that array to RuntimeEffect.makeShader in getSkShader. The canvaskit.js glue copies the uniforms only for an array that is not already in WASM memory (!g._ck is passed as the "own the uniforms" flag), so for this array the SkShader refers to the same memory. CkFragmentShader.dispose() then calls free(floats). The picture is rasterized after it has been recorded, so a shader disposed of right after the draw call reads freed memory, and whatever was allocated there next. The code is the same in 3.27.0 and 3.47.0.

   Smaller sample. Two boxes, red on the left and blue on the right, each filled by its own shader, which is disposed of right after drawRect:

   import 'dart:ui' as ui;
   
   import 'package:flutter/material.dart';
   
   // Build with --dart-define=DISPOSE=false to see the expected picture.
   const disposeAfterDraw = bool.fromEnvironment('DISPOSE', defaultValue: true);
   
   late ui.FragmentProgram program;
   
   Future<void> main() async {
     WidgetsFlutterBinding.ensureInitialized();
     program = await ui.FragmentProgram.fromAsset('shaders/solid.frag');
     runApp(
       const MaterialApp(
         home: ColoredBox(
           color: Colors.white,
           child: Center(
             child: SizedBox(
               width: 400,
               height: 200,
               child: CustomPaint(painter: TwoBoxes()),
             ),
           ),
         ),
       ),
     );
   }
   
   /// A red box on the left and a blue one on the right, each filled by a
   /// shader of its own that is disposed of once it has been drawn.
   class TwoBoxes extends CustomPainter {
     const TwoBoxes();
   
     @override
     void paint(Canvas canvas, Size size) {
       final half = size.width / 2;
       _box(canvas, Rect.fromLTWH(0, 0, half, size.height), 1, 0, 0);
       _box(canvas, Rect.fromLTWH(half, 0, half, size.height), 0, 0, 1);
     }
   
     void _box(Canvas canvas, Rect rect, double r, double g, double b) {
       final shader = program.fragmentShader()
         ..setFloat(0, r)
         ..setFloat(1, g)
         ..setFloat(2, b)
         ..setFloat(3, 1);
       canvas.drawRect(rect, Paint()..shader = shader);
       // The draw call has returned; the docs say a shader can be disposed of
       // once it is no longer needed.
       if (disposeAfterDraw) shader.dispose();
     }
   
     @override
     bool shouldRepaint(TwoBoxes oldDelegate) => false;
   }

   shaders/solid.frag, listed under flutter: shaders: in pubspec.yaml:

   #version 460 core
   #include <flutter/runtime_effect.glsl>
   
   uniform vec4 uColor;
   
   out vec4 fragColor;
   
   void main() {
     fragColor = uColor;
   }

   flutter build web and open it: both boxes are blue, because the freed uniforms of the red shader are reused by the blue one. Built with --dart-define=DISPOSE=false, the boxes are red and blue. In flutter test the same painter draws red and blue with dispose().

   With dispose()	Without dispose()

   Flutter 3.47.0 (stable), Chrome 155.0.8059.80, macOS 26.6.2.

   In a real app this shows as flicker: a package of mine draws a shadow with a fragment shader in a CustomPainter and disposes of the shader after each paint. On the web the shadow changed colour from frame to frame, from whatever happened to be allocated in the freed block. The Shader.dispose docs say that the underlying memory is retained while another object that has not been disposed still needs it, so I'd expect the recorded picture to keep the uniforms alive, as it does off the web.

   👀React with 👀1Reacted by Traison
6. auto-submit

   closed this as completedin #195718on Nov 3, 2026
7. harryterkelsen

   added a commit that references this issue on Nov 3, 2026

   [web] Fix CanvasKit fragment shader uniforms being freed or mutated a…

   ...

   1c7c4db
8. gmackall

   added a commit that references this issue on Nov 3, 2026

   [web] Fix CanvasKit fragment shader uniforms being freed or mutated a…

   ...

   958a5b9