Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Problem with Stack -> "ImageAsset + CustomPainter" with web-renderer html #110070

Closed
RocksteadyDog opened this issue Aug 23, 2022 · 9 comments · Fixed by flutter/engine#38753 or flutter/engine#38949
Closed

Problem with Stack -> "ImageAsset + CustomPainter" with web-renderer html #110070

RocksteadyDog opened this issue Aug 23, 2022 · 9 comments · Fixed by flutter/engine#38753 or flutter/engine#38949
Assignees
@alanwutang11
Labels
c: rendering UI glitches reported at the engine/skia rendering level e: web_html HTML rendering backend for Web engine flutter/engine repository. See also e: labels. found in release: 3.0 Found to occur in 3.0 found in release: 3.1 Found to occur in 3.1 has reproducible steps The issue has been confirmed reproducible and is ready to work on P2 Important issues not at the top of the work list platform-web Web applications specifically r: fixed Issue is closed as already fixed in a newer version

Comments

@RocksteadyDog
Copy link

RocksteadyDog commented Aug 23, 2022 •
edited by exaby73

Steps to Reproduce

  1. Run the code written below with --web-renderer html
    flutter run -d Chrome -web-renderer html

  2. Look at the "GameBoard" -> Stack widget,
    If you run it with --web-renderer html, CustomPainter doesn't render the lines completely. But with --web-renderer canvaskit everything is fine

Code:
main.zip

Expected results:
Look at the screenshot "CanvasKit"

Actual results:
Look at the screenshot "HTML"

Screenshots

HTML:
HTML

CANVASKIT:
CanvasKit

Image Asset
eg

Flutter doctor 
[√] Flutter (Channel stable, 3.0.5, on Microsoft Windows [Version 6.1.7601], locale ru-RU)
    • Flutter version 3.0.5 at C:\Users\denis\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f1875d570e (6 weeks ago), 2022-07-13 11:24:16 -0700
    • Engine revision e85ea0e79c
    • Dart version 2.17.6
    • DevTools version 2.12.2

[√] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at C:\Users\denis\AppData\Local\Android\Sdk
    • Platform android-31, build-tools 31.0.0
    • ANDROID_SDK_ROOT = C:\Users\denis\AppData\Local\Android\Sdk
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)
    • All Android licenses accepted.

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

[X] Visual Studio - develop for Windows
    X Visual Studio not installed; this is necessary for Windows development.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components

[√] Android Studio (version 2020.3)
    • Android Studio at C:\Program Files\Android\Android Studio
    • 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 11.0.10+0-b96-7249189)

[√] VS Code (version 1.70.0)
    • VS Code at C:\Users\denis\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.46.0

[√] Connected device (2 available)

    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 6.1.7601]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 104.0.5112.102

[√] HTTP Host Availability
    • All required HTTP hosts are available
@exaby73 exaby73 added the in triage Presently being triaged by the triage team label Aug 23, 2022
@exaby73
Copy link
Member

exaby73 commented Aug 24, 2022

Hello @RocksteadyDog. Your sample code contains an image that is not part of the zip archive. Could you share a minimal, reproducible example in the form of a repo?

@exaby73 exaby73 added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Aug 24, 2022
@RocksteadyDog
Copy link
Author

Hello @RocksteadyDog. Your sample code contains an image that is not part of the zip archive. Could you share a minimal, reproducible example in the form of a repo?

Hello! Done.

flutter_bug.zip

@github-actions github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Aug 24, 2022
@exaby73
Copy link
Member

exaby73 commented Aug 24, 2022

I can reproduce this issue with stable and master. When the app loads when using HTML, it renders correctly for a first few frames before distorting.

Screenshot

Left: Canvaskit; Right: HTML

image

flutter doctor -v (Stable) 
[✓] Flutter (Channel stable, 3.0.5, on Microsoft Windows [Version 10.0.22000.856], locale en-IN)
    • Flutter version 3.0.5 at C:\Users\Nabeel Parkar\fvm\versions\stable
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f1875d570e (6 weeks ago), 2022-07-13 11:24:16 -0700
    • Engine revision e85ea0e79c
    • Dart version 2.17.6
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at C:\android-sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.12+7-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • CHROME_EXECUTABLE = C:\Program Files\BraveSoftware\Brave-Browser\Application\brave.exe

[✓] Visual Studio - develop for Windows (Visual Studio Community 2022 17.2.6)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.2.32630.192
    • Windows 10 SDK version 10.0.19041.0

[✓] Android Studio (version 2021.2)
    • Android Studio at C:\Program Files\Android\Android Studio
    • 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 11.0.12+7-b1504.28-7817840)

[✓] IntelliJ IDEA Ultimate Edition (version 2022.2)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA 2022.2
    • Flutter plugin version 69.0.5
    • Dart plugin version 222.3739.24

[✓] VS Code (version 1.70.2)
    • VS Code at C:\Users\Nabeel Parkar\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.46.0

[✓] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.22000.856]
    • Chrome (web)      • chrome  • web-javascript • unknown
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 104.0.1293.54

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!
flutter doctor -v (Master) 
[✓] Flutter (Channel master, 3.1.0-0.0.pre.2451, on Microsoft Windows [Version 10.0.22000.856], locale en-IN)
    • Flutter version 3.1.0-0.0.pre.2451 on channel master at C:\Users\Nabeel Parkar\fvm\versions\master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision d24edd5d4c (23 minutes ago), 2022-08-24 09:56:38 -0400
    • Engine revision d73878d9b8
    • Dart version 2.19.0 (build 2.19.0-132.0.dev)
    • DevTools version 2.16.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at C:\android-sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.12+7-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • CHROME_EXECUTABLE = C:\Program Files\BraveSoftware\Brave-Browser\Application\brave.exe

[✓] Visual Studio - develop for Windows (Visual Studio Community 2022 17.2.6)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.2.32630.192
    • Windows 10 SDK version 10.0.19041.0

[✓] Android Studio (version 2021.2)
    • Android Studio at C:\Program Files\Android\Android Studio
    • 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 11.0.12+7-b1504.28-7817840)

[✓] IntelliJ IDEA Ultimate Edition (version 2022.2)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA 2022.2
    • Flutter plugin version 69.0.5
    • Dart plugin version 222.3739.24

[✓] VS Code (version 1.70.2)
    • VS Code at C:\Users\Nabeel Parkar\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.46.0

[✓] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.22000.856]
    • Chrome (web)      • chrome  • web-javascript • unknown
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 104.0.1293.54

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

@exaby73 exaby73 added engine flutter/engine repository. See also e: labels. platform-web Web applications specifically c: rendering UI glitches reported at the engine/skia rendering level e: web_html HTML rendering backend for Web has reproducible steps The issue has been confirmed reproducible and is ready to work on found in release: 3.0 Found to occur in 3.0 found in release: 3.1 Found to occur in 3.1 and removed in triage Presently being triaged by the triage team labels Aug 24, 2022
@RocksteadyDog
Copy link
Author

Addition, if you remove ImageAsset from the container and just add color to the container, everything works fine

@yjbanov yjbanov added the P2 Important issues not at the top of the work list label Aug 25, 2022
@alanwutang11 alanwutang11 self-assigned this Jan 3, 2023
@alanwutang11
Copy link
Contributor

alanwutang11 commented Jan 4, 2023 •
edited

the 5 lines that did not get rendered are because negative Offsets were passed through. We attempt to set an svg width and height as the area to draw our line here, but it isn't possible to set a negative height and width for svg so those lines don't get drawn.

@alanwutang11
Copy link
Contributor

@RocksteadyDog I completely missed that in the provided repro code, the Paint.style was not set to stroke. see this link for more details. If you set the Paint.style to stroke (it defaults to fill), then you will get the correct UI.

@RocksteadyDog
Copy link
Author

@RocksteadyDog I completely missed that in the provided repro code, the Paint.style was not set to stroke. see this link for more details. If you set the Paint.style to stroke (it defaults to fill), then you will get the correct UI.

Thank you. It's works.

@alanwutang11 alanwutang11 mentioned this issue Jan 10, 2023
Merged
8 tasks
@exaby73 exaby73 added the r: fixed Issue is closed as already fixed in a newer version label Jan 12, 2023
@alanwutang11 alanwutang11 reopened this Jan 12, 2023
@alanwutang11 alanwutang11 removed the r: fixed Issue is closed as already fixed in a newer version label Jan 12, 2023
@alanwutang11
Copy link
Contributor

reopening because some internal tests failed

@alanwutang11 alanwutang11 mentioned this issue Jan 17, 2023
Merged
8 tasks
@alanwutang11 alanwutang11 added the r: fixed Issue is closed as already fixed in a newer version label Jan 20, 2023
@github-actions
Copy link

github-actions bot commented Mar 4, 2023

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 4, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@alanwutang11 alanwutang11

Labels
c: rendering UI glitches reported at the engine/skia rendering level e: web_html HTML rendering backend for Web engine flutter/engine repository. See also e: labels. found in release: 3.0 Found to occur in 3.0 found in release: 3.1 Found to occur in 3.1 has reproducible steps The issue has been confirmed reproducible and is ready to work on P2 Important issues not at the top of the work list platform-web Web applications specifically r: fixed Issue is closed as already fixed in a newer version
Projects
None yet
Milestone
No milestone
4 participants
@yjbanov @RocksteadyDog @alanwutang11 @exaby73