[Impeller] incorrect Z order in drawRawPoints. #160343

GGlinsek · 2024-12-16T12:23:05Z

Steps to reproduce

run the code on android or ios.

the issue seems to be if the float32List has too many numbers. Drawing linePoints without the numbers between the 2 comments results in the expected outcome. Drawing only linePoints1 and linePoints2 also works correctly

this bug seems to occur only on 3.27.0. when downgrading to 3.24.4 the bug does not occur.

Expected results

all lines should be drawn under the FloatingActionButton like in the picture below.

Actual results

some of the lines are drawn over the FloatingActionButton. This happens when drawRawPoints needs to draw a line with a lot of points. Also based on when this line is drawn different lines get drawn above the button.

Code sample

import 'dart:ui';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
        ),
        body: LayoutBuilder(builder: (context, constraints) {
          return SizedBox(
            height: constraints.maxHeight,
            width: constraints.maxWidth,
            child: CustomPaint(
              isComplex: true,
              painter: LinePainter(
              ),
            ),
          );
        }),
        floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.black,
          elevation: 4,
          shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(16.0)),
          ),
          onPressed: () {},
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

class LinePainter extends CustomPainter {

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.red
      ..strokeWidth = 5;

    final linePoints = Float32List.fromList([7.135585E26,
      656.5495,
      0.48672,
      656.5495,
      0.48672,
      656.5495,
      0.8232686,
      656.5495,
      0.8232686,
      656.5495,
      1.2351086,
      656.5495,
      1.2351086,
      656.5495,
      // if you comment out the numbers between these two comments it will work as expected
      // start
      1.6539428,
      656.5495,
      1.6539428,
      656.5495,
      2.0600228,
      656.5495,
      2.0600228,
      656.5495,
      // end
      4258.3555,
      656.5495,]);

    final linePoints2 = Float32List.fromList([350,0,350,1000]);

    final linePoints1 =Float32List.fromList([1,1,800,1400]);

    canvas.drawRawPoints(PointMode.lines, linePoints, paint);
    canvas.drawRawPoints(PointMode.lines, linePoints1, paint);
    canvas.drawRawPoints(PointMode.lines, linePoints2, paint);

  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

Screenshots or Video

Screenshots / Video demonstration

https://github.com/user-attachments/assets/f9ff045f-6491-41e7-84c9-ec45d5051c99

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

Flutter doctor:

[✓] Flutter (Channel stable, 3.27.0, on macOS 15.2 24C101 darwin-arm64, locale en-US)
    • Flutter version 3.27.0 on channel stable at /Users/anon/Development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 8495dee1fd (6 days ago), 2024-12-10 14:23:39 -0800
    • Engine revision 83bacfc525
    • Dart version 3.6.0
    • DevTools version 2.40.2

[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
    • Android SDK at /Users/anon/Library/Android/sdk
    • Platform android-35, build-tools 35.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 21.0.3+-79915917-b509.11)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16C5032a
    • CocoaPods version 1.15.2

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

[✓] Android Studio (version 2024.2)
    • 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 21.0.3+-79915917-b509.11)

[✓] Android Studio (version 2024.2)
    • Android Studio at /Users/anon/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 21.0.3+-79915917-b509.11)

[✓] IntelliJ IDEA Ultimate Edition (version 2024.3.1)
    • IntelliJ at /Users/anon/Applications/IntelliJ IDEA Ultimate.app
    • Flutter plugin version 83.0.4
    • Dart plugin version 243.23177

[✓] VS Code (version 1.95.1)
    • VS Code at /Users/anon/Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.96.0

[✓] VS Code (version 1.93.1)
    • VS Code at /Users/anon/Downloads/Visual Studio Code.app/Contents
    • Flutter extension version 3.96.0

[✓] Connected device (4 available)
    • SM G973F (mobile)               • RF8M33HXXMT                              • android-arm64  • Android 12 (API 31)
    • 8da2817b7221035e63e7971be7465790d4703470 • ios            • iOS 16.7.10 20H350
    • macOS (desktop)                 • macos                                    • darwin-arm64   • macOS 15.2 24C101 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad                    • darwin         • macOS 15.2 24C101 darwin-arm64
    • Chrome (web)                    • chrome                                   • web-javascript • Google Chrome 129.0.6668.71

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

• No issues found!

cachapa · 2024-12-16T17:53:05Z

Possibly related, some of my users have also reported bad z-order drawing:

This is a normal BottomSheet overlaid on top of a custom chart widget. The widget is drawing a bunch of lines and text, but weirdly only the dots break the Z order.

The dots are drawn using canvas.drawPoints:

      canvas.drawPoints(PointMode.points, offsets, _outerPaint);
      canvas.drawPoints(PointMode.points, offsets, _centerPaint);

Disabling impeller on Android solved the issue.

GGlinsek · 2024-12-16T18:49:47Z

the issue appears on iphone as well so if disabling impeller helped then impeller is probably the issue. If I remember correctly android moved to impeller on the latest upgrade.

jonahwilliams · 2024-12-16T19:19:16Z

Okay good news, I cannot repro this at ToT - which likely means it was fixed sometime between when the release was cut and now. We just have to bisect a bit to figure out if it can be cherry picked.

GGlinsek · 2024-12-16T20:22:02Z

I am still able to recreate it in our main app and chart example app that we created. On the example that I posted the issue seems resolved. It is likely that the list has a higher threshold for the data it can sucessfully draw. I can not post the code for either but will try to create a new example.

GGlinsek · 2024-12-16T20:25:59Z

also if you look closely at the first screenshot you can see that the first few points don't seem to overlap the ModalSheet. Only after the first few points it starts to draw over

GGlinsek · 2024-12-16T20:32:58Z

I was able to recreate the issue in the example by adding more points to the list

import 'dart:ui';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
        ),
        body: LayoutBuilder(builder: (context, constraints) {
          return SizedBox(
            height: constraints.maxHeight,
            width: constraints.maxWidth,
            child: CustomPaint(
              isComplex: true,
              painter: LinePainter(
              ),
            ),
          );
        }),
        floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.black,
          elevation: 4,
          shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(16.0)),
          ),
          onPressed: () {},
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

class LinePainter extends CustomPainter {

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.red
      ..strokeWidth = 5;

    final linePoints = Float32List.fromList([7.135585E26,
      656.5495,
      0.48672,
      656.5495,
      0.48672,
      656.5495,
      0.8232686,
      656.5495,
      0.8232686,
      656.5495,
      1.2351086,
      656.5495,
      1.2351086,
      656.5495,
      1.6539428,
      656.5495,
      1.6539428,
      656.5495,
      2.0600228,
      656.5495,
      2.0600228,
      656.5495,
      4258.3555,
      656.5495,
      7.135585E26,
      656.5495,
      0.48672,
      656.5495,
      0.48672,
      656.5495,
      0.8232686,
      656.5495,
      0.8232686,
      656.5495,
      1.2351086,
      656.5495,
      1.2351086,
      656.5495,
      1.6539428,
      656.5495,
      1.6539428,
      656.5495,
      2.0600228,
      656.5495,
      2.0600228,
      656.5495,
      4258.3555,
      656.5495,
      7.135585E26,
      656.5495,
      0.48672,
      656.5495,
      0.48672,
      656.5495,
      0.8232686,
      656.5495,
      0.8232686,
      656.5495,
      1.2351086,
      656.5495,
      1.2351086,
      656.5495,
      1.6539428,
      656.5495,
      1.6539428,
      656.5495,
      2.0600228,
      656.5495,
      2.0600228,
      656.5495,
      4258.3555,
      656.5495,
      7.135585E26,
      656.5495,
      0.48672,
      656.5495,
      0.48672,
      656.5495,
      0.8232686,
      656.5495,
      0.8232686,
      656.5495,
      1.2351086,
      656.5495,
      1.2351086,
      656.5495,
      1.6539428,
      656.5495,
      1.6539428,
      656.5495,
      2.0600228,
      656.5495,
      2.0600228,
      656.5495,
      4258.3555,
      656.5495,
      300, 0
    ]);

    final linePoints2 = Float32List.fromList([300,0,300,1000]);

    final linePoints1 =Float32List.fromList([1,1,800,1500]);

    canvas.drawRawPoints(PointMode.lines, linePoints, paint);
    canvas.drawRawPoints(PointMode.lines, linePoints1, paint);
    canvas.drawRawPoints(PointMode.lines, linePoints2, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

jonahwilliams · 2024-12-16T21:04:28Z

This still looks like its working for me on master channel? I'm aware this isn't working on the stable channel and I'm looking into a cherry pick.

cachapa · 2024-12-17T07:44:57Z

I was able to test some combinations:

Stable on Android, with impeller: buggy
Stable on Android, impeller disabled: OK
Stable on iOS, with impeller: buggy
Master on Android, with impeller: OK

Unfortunately I'm not able to test the master channel on iOS but given that it seems to have been a general impeller bug and it's fixed on Android, I'm assuming it's the same for all platforms.

EDIT: I just noticed that there there was a hotfix on stable to 3.27.1, it does not fix the issue on Android impeller.

jonahwilliams · 2024-12-17T18:31:36Z

The fix for this was flutter/engine#56494 , looking into making a cherry pick.

jonahwilliams · 2025-01-08T18:23:19Z

Closing the issue since its fixed, the cherry pick request tracks merging that to stable.

github-actions · 2025-01-22T19:00:42Z

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.

jonahwilliams added e: impeller Impeller rendering backend issues and features requests team-engine Owned by Engine team P1 High-priority issues at the top of the work list labels Dec 16, 2024

jonahwilliams changed the title ~~drawRawPoints in CustomPaint draws over overlays(FloatingActionButton, ModalBottomSheet)~~ [Impeller] incorrect Z order in drawRawPoints. Dec 16, 2024

jonahwilliams self-assigned this Dec 17, 2024

jonahwilliams mentioned this issue Dec 17, 2024

[CP] Fix incorrect depth in drawPoints rendering. #160459

Closed

Yuvaraj-Gajaraj mentioned this issue Dec 27, 2024

Trackball Overlapping after Flutter Upgrade syncfusion/flutter-widgets#2205

Closed

ghost mentioned this issue Dec 30, 2024

GraphUI overlap text and tooltip syncfusion/flutter-widgets#2232

Closed

jonahwilliams added the triaged-engine Triaged by Engine team label Jan 6, 2025

jonahwilliams closed this as completed Jan 8, 2025

github-actions bot locked as resolved and limited conversation to collaborators Jan 22, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Impeller] incorrect Z order in drawRawPoints. #160343

[Impeller] incorrect Z order in drawRawPoints. #160343

GGlinsek commented Dec 16, 2024 •

edited

Loading

cachapa commented Dec 16, 2024

Uh oh!

GGlinsek commented Dec 16, 2024

Uh oh!

jonahwilliams commented Dec 16, 2024

Uh oh!

GGlinsek commented Dec 16, 2024

Uh oh!

GGlinsek commented Dec 16, 2024

Uh oh!

GGlinsek commented Dec 16, 2024

Uh oh!

jonahwilliams commented Dec 16, 2024 •

edited

Loading

Uh oh!

cachapa commented Dec 17, 2024 •

edited

Loading

Uh oh!

jonahwilliams commented Dec 17, 2024

Uh oh!

jonahwilliams commented Jan 8, 2025

Uh oh!

github-actions bot commented Jan 22, 2025

Uh oh!

[Impeller] incorrect Z order in drawRawPoints. #160343

[Impeller] incorrect Z order in drawRawPoints. #160343

Comments

GGlinsek commented Dec 16, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

cachapa commented Dec 16, 2024

Uh oh!

GGlinsek commented Dec 16, 2024

Uh oh!

jonahwilliams commented Dec 16, 2024

Uh oh!

GGlinsek commented Dec 16, 2024

Uh oh!

GGlinsek commented Dec 16, 2024

Uh oh!

GGlinsek commented Dec 16, 2024

Uh oh!

jonahwilliams commented Dec 16, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cachapa commented Dec 17, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jonahwilliams commented Dec 17, 2024

Uh oh!

jonahwilliams commented Jan 8, 2025

Uh oh!

github-actions bot commented Jan 22, 2025

Uh oh!

GGlinsek commented Dec 16, 2024 •

edited

Loading

jonahwilliams commented Dec 16, 2024 •

edited

Loading

cachapa commented Dec 17, 2024 •

edited

Loading