[web]: Text within an HtmlElementView by default is red

[AsturaPhoenix]

The default body text color mentioned in #58828 as an indicator if an app forgets to pick a style may have implications with content in web platform views, e.g. google_maps_flutter_web, even if a style is set on the Flutter side.

It's possible that the resolution would be to require embedded web platform views to do some degree of CSS reset, which might be worth calling out in documentation. There may be some related history in #67740 and #50452.

Potential documentation sites:

• https://api.flutter.dev/flutter/widgets/HtmlElementView-class.html
• Somewhere in https://docs.flutter.dev/development/platform-integration/web/

Steps to Reproduce

https://dartpad.dev/5661e339114f8e41950451dce63ebad7

• Repros on both stable and master on DartPad.
• Repros on master on both Chrome and Edge in debug and release locally. Also tested and repro'd on Chrome with HTML renderer in debug.
• Repros with or without textTheme: Typography.blackMountainView.

Expected results: Text styling similar to user-agent default or the nearest Flutter Theme.

Actual results: Red text from the body text styling debug indicator.

Code sample

import 'dart:ui';
import 'dart:html';
import 'package:flutter/material.dart';

void main() {
  platformViewRegistry.registerViewFactory(
      'example', (_) => DivElement()..innerText = 'Hello, HTML!');

  runApp(MaterialApp(
      title: 'Example',
      theme: ThemeData(colorSchemeSeed: const Color(0xff000000)),
      home: Scaffold(
          appBar: AppBar(
            title: const Text('Example'),
          ),
          body: Column(children: const [
            Text('Hello, Flutter!'),
            SizedBox(
                width: 512,
                height: 512,
                child: HtmlElementView(viewType: 'example'))
          ]))));
}

[arnirichard]

Not sure how related this is, but default RichText/TextSpan color is red on mobile web, see text "TextSpan" on
https://easythai.net
is default red on mobile browser, but black on Window desktop browsers, I created repo for this (and issue #115046)
https://github.com/arnirichard/fluttertest
Please let me know if this is a separate issue and I will create a bug

[huycozy]

@AsturaPhoenix, thanks for filing the issue. This issue is reproducible on the latest stable and master channels.
Both canvaskit and html renderers are affected.

Demo

Sample code (completed)

import 'dart:ui' as ui;
import 'dart:html';
import 'package:flutter/material.dart';

void main() {
  ui.platformViewRegistry.registerViewFactory(
      'example', (_) => DivElement()..innerText = 'Hello, HTML!');

  runApp(MaterialApp(
      title: 'Example',
      theme: ThemeData(colorSchemeSeed: const Color(0xff000000)),
      home: Scaffold(
          appBar: AppBar(
            title: const Text('Example'),
          ),
          body: Column(children: const [
            Text('Hello, Flutter!'),
            SizedBox(width: 512, height: 512, child: HtmlElementView(viewType: 'example'))
          ]))));
}

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.3.8, on macOS 13.0 22A380 darwin-x64, locale en-VN)
    • Flutter version 3.3.8 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 52b3dc25f6 (23 hours ago), 2022-11-09 12:09:26 +0800
    • Engine revision 857bd6b74c
    • Dart version 2.18.4
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 31.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14A400
    • CocoaPods version 1.11.3

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

[✓] Android Studio (version 2021.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
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)

[✓] IntelliJ IDEA Community Edition (version 2022.2.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 70.0.5
    • Dart plugin version 222.4167.21

[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
    • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.app
    • 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

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

[✓] Connected device (3 available)
    • iPhone 14 Pro Max (mobile) • 332079AF-E895-4685-910E-7B1E18B0C6B8 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-0 (simulator)
    • macOS (desktop)            • macos                                • darwin-x64     • macOS 13.0 22A380 darwin-x64
    • Chrome (web)               • chrome                               • web-javascript • Google Chrome 107.0.5304.110

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

• No issues found!

[!] Flutter (Channel master, 3.6.0-3.0.pre.1, on macOS 13.0 22A380 darwin-x64, locale en-VN)
    • Flutter version 3.6.0-3.0.pre.1 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision cb224d10e3 (26 minutes ago), 2022-11-13 21:57:38 -0500
    • Engine revision b7567b92c7
    • Dart version 2.19.0 (build 2.19.0-394.0.dev)
    • DevTools version 2.19.0
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 31.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14A400
    • CocoaPods version 1.11.3

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

[✓] Android Studio (version 2021.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
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)

[✓] IntelliJ IDEA Community Edition (version 2022.2.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 70.0.5
    • Dart plugin version 222.4167.21

[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
    • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.app
    • 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

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 13.0 22A380 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 107.0.5304.110

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

! Doctor found issues in 1 category.

[huycozy]

@arnirichard Your issue is different than this one and is being tracked at #115046. Please follow up on it for further updates.

[ditman]

I'll take care of this at the same time I work on embedding flutter in its own frame. Right now, we're applying some "extra" CSS outside of the page that affects default flutter colors, but also unstyled "slot content".

(One solution would be to set the font color to red only within the flutter shadow-dom, rather than in the global page.)

@AsturaPhoenix as a workaround, for google maps, we add a classname of infowindow-snippet here that might help you override the default from a standard stylesheet on your page.

I know this is not very flutter-y, but the maps JS SDK works with raw html, rather than us rendering flutter widgets on top of a map background.

[AsturaPhoenix]

@AsturaPhoenix as a workaround, for google maps, we add a classname of infowindow-snippet here that might help you override the default from a standard stylesheet on your page.

Thanks; for now I'm just wrapping the entire platform view in a CSS reset since I had to fork it anyway to do overlays on web.

e.g. AsturaPhoenix/flutter-plugins@bf627ad

That snippet is interesting though; thank you; I had noticed that web lets us put HTML into an info window while Android does not, and I was curious about things.

[ditman]

@AsturaPhoenix very interesting. Another thing you could do to reset that is maybe to apply the reset to the element that we use to define the slot:

something like this somewhere in your index.html:

<style>
  flt-platform-view {
    all: initial;
  }
</style>

(I haven't tested this, but) maybe it fixes the platform view styling without having to explicitly re-wrap them with another DIV?

[AsturaPhoenix]

something like this somewhere in your index.html:

<style>
  flt-platform-view {
    all: initial;
  }
</style>

@ditman I really liked how your idea would patch the problem for all web platform views rather than just Maps, but it turns out it has a hidden side effect that it's taken me a while to notice. Somehow, applying the reset on the flt-platform-view (rather than the map div) may also prevent stacked elements wrapped in PointerInterceptor from displaying 👆 cursors.

Not sure if that'll have any bearing on a long-term fix, but it could be a test case to keep in mind.

[ditman]

@AsturaPhoenix apologies you had to do/undo this; I forgot all about the cursor style that we set in the body element. You may be able to extend the fix I proposed above with the following CSS:

flt-platform-view {
  all: initial;
  cursor: inherit;
}

You can fiddle with it here, without having to rebuild your webapp, this is a pure CSS issue: https://jsfiddle.net/ditman/rk264981

[AsturaPhoenix]

@ditman No worries; this is all still pretty early prototyping so a bit of churn is fine. I think I will stick with limiting the reset to the maps div for now though just in case there are any other styles that need to make it through to the platform view for other purposes, since these are hard to notice.

[ditman]

In my latest change to the engine, I've moved the red styling away from the body tag, and into the ShadowDOM of the Flutter app, this issue should not happen anymore. Styling of the .infowindow-snippet needs to happen in a CSS stylesheet, and cannot be controlled via flutter though.

[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.