Mobile Web Crash (android chrome) and Instability (safari, firefox) when RepaintBoundary() is used alongside Custom Painter and zoom.

@justinmc

Steps to Reproduce

Include the below code into a project,

flutter run -d chrome --web-hostname ipmobilecanaccesshere --web-port 8080

You will notice that if you abuse zooming on mobile chrome for android causes a crash, and significant instability on mobile firefox and safari on iPad pro. In some cases, the painter will crash and the app will be considered stable. Without the RepaintBoundary() widget, the application does not have any instability.

cc: @justinmc because I have only reproduced with InteractiveViewer.

Edit: This crash is present both in release and debug.
Edit2: My example uses a gif, but the issue persists with a basic image or FlutterLogo()

class BackgroundPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = new Paint();
    var path = new Path();
    canvas.drawPath(path, paint);
    path = Path();

    var tc = size.topCenter(Offset.zero);
    var bc = size.bottomCenter(Offset.zero);
    path.moveTo(tc.dx, tc.dy);
    path.lineTo(bc.dx, bc.dy);

    canvas.drawPath(
        path,
        new Paint()
          ..color = Colors.blue
          ..strokeWidth = 4.0
          ..style = PaintingStyle.stroke);
  }

  @override
  bool shouldRepaint(BackgroundPainter oldDelegate) {
    return false;
  }
}

Widget:

InteractiveViewer(
          transformationController: TransformationController(),
          constrained: false,
          maxScale: 1,
          minScale: .5,
          scaleEnabled: true,
          child: Container(
              color: Colors.white,
              width: 2500,
              height: 2500,
              child: Stack(
                children: [
                  CustomPaint(
                    size: Size(double.infinity, double.infinity),
                    painter: BackgroundPainter(),
                  ),
                  Positioned(
                      top: 50,
                      left: 50,
                      child: RepaintBoundary(
                          child: Container(
                              width: 500,
                              height: 500,
                              child: Image.network(
                                  "https://media1.tenor.com/images/8bf8d20ede5815c3c2fa05076a0d6877/tenor.gif"))))
                ],
              ))),

! Doctor found issues in 1 category.

[√] Flutter (Channel master, 1.20.0-1.0.pre.90, on Microsoft Windows [Version 10.0.17758.4], locale en-US)
    • Flutter version 1.20.0-1.0.pre.90 at C:\src\flutter
    • Framework revision 42e02d60d3 (23 hours ago), 2020-06-17 10:57:40 -0700
    • Engine revision 965fbbed17
    • Dart version 2.9.0 (build 2.9.0-14.0.dev 2b917f5b6a)

[!] Android toolchain - develop for Android devices (Android SDK version 29.0.1)
    • Android SDK at C:\Users\Miche\AppData\Local\Android\sdk
    • Platform android-29, build-tools 29.0.1
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    X Android license status unknown.
      Try re-installing or updating your Android SDK Manager.
      See https://developer.android.com/studio/#downloads or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 4.0)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin version 46.0.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

[√] VS Code (version 1.46.0)
    • VS Code at C:\Users\Miche\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.11.0

[√] Connected device (2 available)
    • Web Server • web-server • web-javascript • Flutter Tools
    • Chrome     • chrome     • web-javascript • Google Chrome 83.0.4103.106

Reproduced crash with current master 1.20.0-1.0.pre.118, current dev 1.20.0-0.0.pre, current beta 1.19.0-4.1.pre on Redmi Note 7 Android 9 (API 28) - chrome exits

Note: iOS simulator, only message in console: Canvas area exceeds the maximum limit (width * height > 16777216). Will try Chrome mobile next.

I couldn't reproduce this, but I'm sure I'm doing something wrong. I'm not even sure what the best way is to run this on a mobile browser, but I tried on desktop Chrome and the iOS simulator with the following code. I just zoomed around a bunch.

Complete app code

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Demo',
      home: Scaffold(
        appBar: AppBar(title: Text('Demo')),
        body: Center(
          child: InteractiveViewer(
          transformationController: TransformationController(),
          constrained: false,
          maxScale: 1,
          minScale: .5,
          scaleEnabled: true,
          child: Container(
            color: Colors.white,
            width: 2500,
            height: 2500,
            child: Stack(
              children: [
                CustomPaint(
                  size: Size(double.infinity, double.infinity),
                  painter: BackgroundPainter(),
                ),
                Positioned(
                    top: 50,
                    left: 50,
                    child: RepaintBoundary(
                      child: Container(
                        width: 500,
                        height: 500,
                        child: Image.network(
                          "https://media1.tenor.com/images/8bf8d20ede5815c3c2fa05076a0d6877/tenor.gif",
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class BackgroundPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = new Paint();
    var path = new Path();
    canvas.drawPath(path, paint);
    path = Path();

    var tc = size.topCenter(Offset.zero);
    var bc = size.bottomCenter(Offset.zero);
    path.moveTo(tc.dx, tc.dy);
    path.lineTo(bc.dx, bc.dy);

    canvas.drawPath(
        path,
        new Paint()
          ..color = Colors.blue
          ..strokeWidth = 4.0
          ..style = PaintingStyle.stroke);
  }

  @override
  bool shouldRepaint(BackgroundPainter oldDelegate) {
    return false;
  }
}

Everything works great on desktop browsers. The issue is only present on mobile browsers from my testing.

Edit: if you use flutter run -d chrome --web-hostname ipmobilecanaccesshere --web-port 8080 to deploy to your local IP address you can then access the deployed site from a mobile device on the same network to test.

@michaelreed

@michaelreed Thanks that worked! I just used an iPhone 7 running iOS 13, and I couldn't get it to crash on Chrome or on Safari, though. I was just zooming in and out and flinging it around the screen.

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.

Navigation Menu

Mobile Web Crash (android chrome) and Instability (safari, firefox) when RepaintBoundary() is used alongside Custom Painter and zoom. #59775

Steps to Reproduce

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Mobile Web Crash (android chrome) and Instability (safari, firefox) when RepaintBoundary() is used alongside Custom Painter and zoom. #59775

Description

Steps to Reproduce

Activity

VladyslavBondarenko commented on Jun 19, 2020

ferhatb commented on Aug 28, 2020

justinmc commented on Sep 3, 2020

MichealReed commented on Sep 3, 2020

justinmc commented on Sep 8, 2020

github-actions commented on Aug 10, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions