[web] Regression : Containers and CustomPaints are always drawn behind images

[rxlabz]

Since 1.10.17, if a Stack contains an image and colored Container or CustomPaint on top of it, drawn shapes are not visible.

master branch : Flutter (Channel master, v1.10.17-pre.74, on Mac OS X 10.14.6 18G1012, locale fr-FR)

⚠️UPDATE It's now reproduced on last dev release ( 1.12.1 )

On dev branch 1.10.16 : works as expected

On master branch and dev branch 1.12.1

On master branch with an image with half opacity

Steps to Reproduce

You can download and run the project

1. add a Stack in a screen
2. add an Image ( asset or network ) to the stack
3. add some container with size and color on top of it
4. add a CustomPaint and draw something with a CustomPainter

Target Platform : Web
Target OS version/browser : MacOS Chrome
Devices: iMac, iPhone, iPad

Code

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

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: StackScreen(),
    );
  }
}

class StackScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Opacity(opacity: 1,child: Image.asset('assets/img.png')),
          CustomPaint(size: Size(200, 200), painter: MyPainter()),
          Align(
            alignment:Alignment.topRight,
            child: Container(color: Colors.yellow, width: 100, height: 100),
          ),
          RaisedButton(
            child: Text('A Button', style: TextStyle(color: Colors.pink)),
            onPressed: () {},
          )
        ],
      ),
    );
  }
}

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawRect(
        Rect.fromPoints(Offset.zero, size.bottomRight(Offset.zero)),
        Paint()
          ..color = Colors.red
          ..style = PaintingStyle.fill);
  }

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

[rxlabz]

The bug now happens in the last dev release : Flutter 1.12.1 • channel dev • https://github.com/flutter/flutter.git
Framework • revision 86c91b1 (4 days ago) • 2019-11-11 13:29:46 -0800
Engine • revision 31cd2df
Tools • Dart 2.7.0

[TobiasHeidingsfeld]

Can confirm this bug and it is a critical problem

[owenmech]

Occurs even if the image is part of a parent widget, not just with a Stack.

Edit: Temporary "fix" is wrapping the image with an Opacity of 0.99

[TobiasHeidingsfeld]

Any ETA for the Fix? This Bug is critical and breaks many applications completly as this is a very common thing

[yjbanov]

A short-term workaround is to wrap the Image widget in a RepaintBoundary. Caveats:

• May have negative performance impact (but if you're lucky it could have a positive impact too).
• Does not work if the image is inserted in the midst of other paint operations on the same canvas. For example, it probably won't help Ink.image or CustomPainters that draw stuff after calling Canvas.drawImage.

[Ahmadre]

@yjbanov But why did it work in the past and now not? What significant change was that? Maybe I can help...I recognized some severe ui and gesture issues in the last time...

[ignaciotcrespo]

A short-term workaround is to wrap the Image widget in a RepaintBoundary. Caveats:

• May have negative performance impact (but if you're lucky it could have a positive impact too).
• Does not work if the image is inserted in the midst of other paint operations on the same canvas. For example, it probably won't help Ink.image or CustomPainters that draw stuff after calling Canvas.drawImage.

I had a similar problem, and RepaintBoundary fixed it. Thanks!
My problem was related to texts. I have a stack of containers. Each container contains some texts. In web all the texts are displayed in top of all containers (but the debug paint is drawn correctly).

[Ahmadre]

@ignaciotcrespo tried that with RepaintBoundary didn't work like @yjbanov suggested:

The AssetImage on the top was wrapped with a RepaintBoundary. The AssetImage on the bottom FilterChip is not wrapped with a RepaintBoundary...

[Constans]

It seems that in my case happened only in the mobile browser. On the desktop browser worked fine until the last tests (on 1.12.13).
Versions 1.12.6 (and up) web builds became so unstable that I decided to play with 1.10.16 for a while (the last stable version for web as far as I've tested).
A possible explanation for the issue is: #45605 (comment)

[Ahmadre]

@rxlabz there was a merge in master branch the last time, can you test that again? I will test that now too.

[Ahmadre]

Ok, it's not changed yet. Just tested it right now on newest flutter version v1.12.17-pre.67

[rxlabz]

@Ahmadre thanks, yes I tested too and the problem is not fixed yet.

[yjbanov]

@Ahmadre

But why did it work in the past and now not? What significant change was that? Maybe I can help...I recognized some severe ui and gesture issues in the last time...

It worked in the past because we didn't have a bug, and now we do. The significant change was that we added a heuristic where we prefer an <img> tag instead of canvasContext.drawImage. The tag is faster in many cases, especially for large images. However, our heuristic missed the case where an image is followed by more drawing operations on the same canvas. We're working on a fix. Stay tuned.

[TobiasHeidingsfeld]

Happy Holidays. My wish for Santa is that this Bug be fixed before (New Year) so I can stop beeing stuck at 1.10.16 :) Thank you Flutter for a year of great work, please don't get stuck with critcal bugs like these that made developers run away from Tools like React Native in droves.

[TobiasHeidingsfeld]

Thank you for the work on this bug. Unfortunately, in the latest master there are now issues with the positioning of Containers / CustomerPainters. In the project linked by rxlabz at the top you can see that if you press the RaisedButton the "OnPressed Overlay" effect is not at the correct position but moved a bit to the top left. I also see this many times with my web project that Containers with decorations are at the wrong position when everything works fine on iOS and Android.

Flutter (Channel master, v1.13.8-pre.39, on Microsoft Windows [Version 10.0.18362.535], locale en-DE)
• Flutter version 1.13.8-pre.39 at C:\Tools\flutter
• Framework revision 505af78 (4 hours ago), 2020-01-07 22:49:27 -0800
• Engine revision a50f1ef
• Dart version 2.8.0 (build 2.8.0-dev.0.0 bebc7d3af5)

[rxlabz]

@TobiasHeidingsfeld Hi Tobias, I only see this problem if I "zoom" in the page. Can you provide a screenshot please ?

[TobiasHeidingsfeld]

@rxlabz Added screenshots at https://imgur.com/a/q1or9em as github would not let me. Its two screenshots, the second has blue marking of two bugs, one is the "OnPressed Overlay" of the RaisedButton and the other is the yellow Box which should be aligned top right, but actually is quite far away from top right. Both issues render correctly on android/ios just are bugged on lastest web master (version see above)

[rxlabz]

@TobiasHeidingsfeld on my side this problem only appears when is not in 100% scale https://youtu.be/IyIF7fr0fAs so it's seems not related to this issue.

[TobiasHeidingsfeld]

I played around a little and noticed for me all works fine on 80% but is broken on 100%. Screenshots https://imgur.com/a/wo8v2hY

[TobiasHeidingsfeld]

I also noticed that performance is significantly slower than in versions 1.10.16 and before in every semi complex composition of containers and images

[ferhatb]

We are looking into zoom level issue. @TobiasHeidingsfeld can you please file a new issue for performance with sample complex composition to repro.

[ferhatb]

Update: devicePixelRatio (scaling and high-dpi devices) issue resolved in flutter/engine#15327 , should land shortly.

[Constans]

@ferhatb, with the latest version - Flutter (Channel master, v1.13.8-pre.58, on Mac OS X 10.15.2 19C57, locale en-NL), everything looks messed up on latest Chrome mobile. It also looks messed up in Safari on an iPad.
Basically the way it looks is like sometimes things were scaled correctly and sometimes shrunk down with no logic, on the same page. Just random scaling.
On mobile (phones & tablets) the main issue reported in this ticket is solved. The painting is also offset and under scaled.
In Chrome, on a laptop, it looks fine.

To date, version 1.10.16 seems to be the version that worked best, so I'll be sticking to that and test new updates in parallel.
Looking forward to an update that matches at least the output quality of 1.10.16.

[TobiasHeidingsfeld]

@Constans I have high hopes that with the latest fix (flutter/engine#15327) things will work. Somehow "flutter upgrade" in the master channel keeps me on an version from 13 hours ago, even if there are many commits in the master since then. When can I update to the latest version to try?

@ferhatb Thank you for the work on this important issue! Much appreciated

[Constans]

@TobiasHeidingsfeld, it's a good thing we can switch between versions and channels in a matter of seconds.

1.10.16 works great but staying with that version, next to having a couple of nasty bugs, keeps us out of testing the new stuff that gets added with each update.

I'm also thankful to the Flutter team and looking forward with confidence to the updates that are to come this year.

[TobiasHeidingsfeld]

@ferhatb Will try to create a sample that's more performant on the 1.10.16 version. For now, I can mostly see it in my multiplayer poker game. Performance is about the same on iOS/Android for the versions but slower on the web. I can not send the source for this sadly, so I can try to find ways to reproduce it in a sample project.

[TobiasHeidingsfeld]

@ferhatb I could update to the latest master and now all the bugs in the sample project are gone and the performance is also almost back to how it was before.

As far as I can see there is still on issue left, positions can be wrong when using a AnimatedScale Widget but all else seems great!

[Constans]

@ferhatb, @TobiasHeidingsfeld I wanted to confirm, but in Flutter 1.13.8-pre.70 things still are off-scaled on mobile (Android phone - Chrome latest and iPad tablet - Safari). It seems that the hit area is placed correctly, only the visual representation is under-scaled

Also on the desktop web browser - Chrome latest, the images flicker (reload) when I hover a Card with multiple positioned. Images are loaded using FadeInImage. Also positioning is off in a ClipOval (avatar image).

So for now, I switch back to 1.10.16

Good luck!

Flutter 1.13.8-pre.70 • channel master • https://github.com/flutter/flutter.git
Framework • revision db08afd07f (8 hours ago) • 2020-01-09 19:28:01 -0800
Engine • revision f001ea29f1
Tools • Dart 2.8.0 (build 2.8.0-dev.0.0 c0ca187f26)

[TobiasHeidingsfeld]

@ferhatb I have to confirm @Constans report. When I tested yesterday I updated to the latest version but the webserver was still serving JS generated by 1.10.16

For now, I am also back on 1.10.16

[Constans]

@TobiasHeidingsfeld, take a look at this solution on solving caching when serving the main file.

[Constans]

@ferhatb , the latest version that I tested works great on most browsers/devices.

Flutter 1.13.9-pre.59 • channel master • https://github.com/flutter/flutter.git
Framework • revision ab36346af6 (22 hours ago) • 2020-01-11 14:20:05 -0500
Engine • revision 3d37d39d95
Tools • Dart 2.8.0 (build 2.8.0-dev.0.0 395daaa3ec)

There are some glitches on Safari (macOS && iOS).

Images are flickering in the browser on the laptop - macOS (even if I don't have the inspect opened) when I scroll some vertical ListViews made of Cards with multiple positioned elements inside or hover buttons in those Cards.

Also, there is a ClipOval masking issue, that seems to be offset and moving around when I scroll or scale up/down the browser:
https://adobe.ly/3a2PAJm

I've opened 2 issues for the 2 problems: #48681 && #48683

Thank you && great work so far!

[TobiasHeidingsfeld]

@Constans Thank you for your work producing the bug tickets, I can confirm them in my testing. Still I see we are on a good way and Flutter for Web seems to be close to stable again. Thanks also to @ferhatb

[github-actions]

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.