[BUG] Html Widget appears greyed out on some mobile browsers

[mehlkelm]

Describe the bug: Using the Html widget with even simplest content appears greyed out - without any content - on some mobile browsers (e.g. Safari on iPhone 6S, iOS 15) when built for web.

Steps to reproduce:

1. Create a simple flutter project
2. Add flutter_html: ^3.0.0-beta.2 dependency
3. Add a Html widget to the tree
4. Adjust base href in index.html if necessary
5. Build for web
6. Upload to a server
7. Access URL with mobile browser

HTML to reproduce the issue: Any Html works. Reproduced here with: "

Test

On some mobile Browsers, this Html widget appears gray.

"

Html widget configuration: Html(data: "<h1>Test</h1><p>On some mobile Browsers, this Html widget appears gray.</p>"),

Expected behavior: This widget should display the text: Test On some mobile Browsers, this Html widget appears gray.

Device details and Flutter/Dart/flutter_html versions and Screenshots flutter_html: ^3.0.0-beta.2

Broken on Safari, iPhone 6S, iOS 15

Working correctly on Safari on iPhone 11, iOS 16.6

A picture of a cute animal (not mandatory but encouraged) Our cat dreaming of being a T-Rex.

[erickok]

This is probably a non-debug release? This means Flutter si throwing some error. It might be a bug in flutter_html but you are using an older version. Did you try to upgrade?

(Cat dreams are the best 😸 )

[mehlkelm]

3.0.0-beta.2 isn't the newest version?

[erickok]

Oops, sorry it is. Can you try https://pub.dev/packages/flutter_html/versions/3.0.0-alpha.5/changelog (which is older but a version from before the css box model refactor)?

[mehlkelm]

Just tested. 3.0.0-alpha.5 has the same issue :-/

[erickok]

Could you make a debug build and post the crash log? And add which web renderer you are using.

[mehlkelm]

Love to help, but need a little support: Since I cannot run the app directly on the mobile browser of my test device, I have to deploy a build onto my server. Does that work with a debug build and would I be able to get a crash log from there?

[mehlkelm]

Got something: Accessing the same build running on localhost from iOS Simulators: iPhone 14/iOS 16.4 (left) and iPhone 6S/iOS 15.0 (right)

[mehlkelm]

Same effect on two iPhone 11 simulators, one with iOS 16.4 (works), one with iOS 15.0: FormatException: Illegal RegExp pattern: (?<=\n) *, SyntaxError: Invalid regular expression: invalid group specifier name

[erickok]

This is a duplicate of #1314

[mehlkelm]

Agreed. Should I close this?

[k00na]

Got something: Accessing the same build running on localhost from iOS Simulators: iPhone 14/iOS 16.4 (left) and iPhone 6S/iOS 15.0 (right)

Hey, Can you please share do you get the red error screen to be displayed while running a web build like this? I only get the grey screen and I tried with all of the bellow:

void main() async {
  await AppSetup.init(buildEnvironment: BuildEnvironment.development);
  // ErrorWidget.builder = (FlutterErrorDetails errorDetails) {
  //   return AppErrorWidget(
  //     errorDetails: errorDetails,
  //     isDev: true,
  //   );
  // };
  // RenderErrorBox.backgroundColor = Colors.transparent;
  // RenderErrorBox.textStyle = ui.TextStyle(color: Colors.transparent);
  ErrorWidget.builder = (FlutterErrorDetails details) => ErrorWidget(details.exception);
  runApp(const AvyApp());
}

[zoziapps]

Hey, Can you please share do you get the red error screen to be displayed while running a web build like this? I only get the grey screen and I tried with all of the bellow:

I didn't use RenderErrorBox, just the normal Html Widget.

Run locally (debug), build for web. Then open Safari on the iOS Simulator and go to the same URL the current Chrome window is displaying.