Flutter web renderer (not CanvasKit): Nested Y Axis rotation causes a child widget to disappear

Question

While nesting two Transform widgets, child widget (I.E. a picture) is disappearing in some cases.

It happens with Animation and AnimatedBuilder as well.

Conditions for reproducing:

• Wide screen resolution only.
• Flutter Web with HTML web renderer only (Not Android nor Flutter Web with CanvasKit)
• Flutter 2.10.2

Minimal reproduce:

1. Create new folder flutter_web_bug

2. Open terminal inside that folder and execute flutter create .

3. Replace ./lib/main.dart contents with the following code

4. Open terminal and execute flutter run -d chrome --web-renderer html

    import 'dart:async';
    import 'dart:math';
   
    import 'package:flutter/material.dart';
   
    void main() {
      runApp(const MyApp());
    }
   
    class MyApp extends StatelessWidget {
      const MyApp({Key? key}) : super(key: key);
   
      @override
      Widget build(BuildContext context) {
        return const MaterialApp(
          title: 'Flutter web bug',
          home: MyHomePage(title: 'Flutter web bug'),
        );
      }
    }
   
    class MyHomePage extends StatefulWidget {
      const MyHomePage({Key? key, required this.title}) : super(key: key);
   
      final String title;
   
      @override
      State<MyHomePage> createState() => _MyHomePageState();
    }
   
    class _MyHomePageState extends State<MyHomePage> {
      double angle = 0.0;
      @override
      void initState() {
        super.initState();
        Timer.periodic(const Duration(milliseconds: 20), (timer) {
          setState(() {
            angle += 0.01;
          });
        });
      }
   
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              title: Text(widget.title),
            ),
            body: Center(
              child: Transform(
                  transform: Matrix4.identity()
                    ..setEntry(3, 2, 0.001)
                    ..rotateY(pi * angle),
                  alignment: Alignment.center,
                  child: Align(
                      alignment: Alignment.center,
                      child: Container(
                          color: const Color(0xffaaffff),
                          child: Transform(
                              alignment: Alignment.center,
                              transform: Matrix4.identity()..rotateY(pi),
                              child: Image.network('https://docs.flutter.dev/assets/images/dash/dash-fainting.gif'))))),
            ));
      }
    }
   

Demonstration:

Answer 1

The issue seems to be with Image.network() where the image is rebuilding. I tested using the cached_network_image library and was able to get the image to stay rendered while animating. Hopefully this helps!