[web] HTML renders odd appearance compared to CanvasKit

[omatt]

Steps to Reproduce

I'm displaying network images on Flutter web. The workaround I found to fix this issue by adding --web-renderer html arguments on my build. Let me know if you have better workarounds to display network images on Flutter web. Otherwise, I'd like HTML render to have similar appearance with CanvasKit render.

Currently it looks like this

HTML

Density isn't ideal when viewed on high-density displays and text style seems to be different as well.

CanvasKit

1. Run any sample Flutter app with flutter run -d chrome --web-renderer html
2. Run any sample Flutter app with flutter run -d chrome --web-renderer canvaskit

Expected results:

HTML render should have similar appearance with CanvasKit

Actual results:

HTML render doesn't look great on high-density displays.

Logs

[✓] Flutter (Channel stable, 2.2.3, on macOS 11.5.2 20G95 darwin-x64, locale en-PH)
    • Flutter version 2.2.3
    • Framework revision f4abaa0735 (2 months ago), 2021-07-01 12:46:11 -0700
    • Engine revision 241c87ad80
    • Dart version 2.13.4

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK
    • Platform android-30, build-tools 30.0.2
    • Java binary at: /Library/Internet Plug-Ins/JavaAppletPlugin.plugin/Contents/Home/bin/java
    • Java version Java(TM) SE Runtime Environment (build 1.8.0_221-b11)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.0.1, Build version 12A7300
    • CocoaPods version 1.10.0

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

[!] Android Studio (version 2020.3)
    • 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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] VS Code (version 1.59.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.25.0

[✓] Connected device (1 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 93.0.4577.63

! Doctor found issues in 1 category.

[iandis]

This has been like this since the dawn of Flutter web, I think we just need to be patient. Because at least the fonts are not blurry anymore now compared to on Flutter 2.2.3 and text on buttons no longer give weird animation when hovered. Also, images (on html renderer) are now better on 2.5.0, no blurry images. Hot restart on 2.5.0 is significantly better now IMO 😄

[iapicca]

Expected results:

HTML render should have similar appearance with CanvasKit

I'm surprised that there isn't a test (goldens?) that enforces that.
I think the issue shouldn't be closed until such test is added

[darshankawar]

Verified on latest stable and master and see below behavior:

1. With canvaskit, the text is rendererd normal:

2. With html, the text is rendered bold:

stable, master flutter doctor -v

[✓] Flutter (Channel stable, 2.5.0, on Mac OS X 10.15.4 19E2269 darwin-x64,
    locale en-GB)
    • Flutter version 2.5.0 at /Users/dhs/documents/fluttersdk/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 4cc385b4b8 (2 days ago), 2021-09-07 23:01:49 -0700
    • Engine revision f0826da7ef
    • Dart version 2.14.0

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    • CocoaPods version 1.10.1

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

[✓] VS Code (version 1.58.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.21.0

[✓] Connected device (3 available)
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729 • ios
      • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                               •
      web-javascript • Google Chrome 93.0.4577.63

• No issues found!

[✓] Flutter (Channel master, 2.6.0-1.0.pre.256, on Mac OS X 10.15.4 19E2269
    darwin-x64, locale en-GB)
    • Flutter version 2.6.0-1.0.pre.256 at
      /Users/dhs/documents/fluttersdk/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 0d0f7a4fb0 (2 hours ago), 2021-09-12 21:17:23 -0700
    • Engine revision abb1980f65
    • Dart version 2.15.0 (build 2.15.0-96.0.dev)

[✓] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.10.1

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

[✓] VS Code (version 1.58.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.21.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • Mac OS X 10.15.4 19E2269
      darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 93.0.4577.63

• No issues found!