[web]: crash when the whole app is hidden via css on Firefox

[deckerst]

When a Flutter Web app is loaded in an iframe in another site and it is hidden (e.g. with display: none), an exception is thrown and the app is no longer usable, even after making it visible again.

══╡ EXCEPTION CAUGHT BY SCHEDULER LIBRARY ╞═════════════════════════════════════════════════════════ dart_sdk.js:19110:15
The following NativeJavaScriptObject object was thrown during a scheduler callback: dart_sdk.js:19110:15
  [Exception... "Failure"  nsresult: "0x80004005 (NS_ERROR_FAILURE)"  location: "JS frame :: dart_sdk.js:19110:15
http://localhost:8081/chat/packages/flutter_web_ui/ui.ddc.js :: clear :: line 811"  data: no] dart_sdk.js:19110:15
dart_sdk.js:19110:15
When the exception was thrown, this was the stack: dart_sdk.js:19110:15
Non-error `[Exception... "Failure"  nsresult: "0x80004005 (NS_ERROR_FAILURE)"  location: "JS frame :: http://localhost:8081/chat/packages/flutter_web_ui/ui.ddc.js :: clear :: line 811"  data: no]` thrown by JS does not have stack trace. dart_sdk.js:19110:15
Caught in Dart at: dart_sdk.js:19110:15
dart_sdk.js:19110:15
dart:sdk_internal 4591:14                                                                  stackTrace dart_sdk.js:19110:15
package:flutter_web/src/scheduler/packages/flutter_web/src/scheduler/binding.dart 1031:25  [_invokeFrameCallback] dart_sdk.js:19110:15
package:flutter_web/src/scheduler/packages/flutter_web/src/scheduler/binding.dart 963:9    handleDrawFrame dart_sdk.js:19110:15
package:flutter_web/src/scheduler/packages/flutter_web/src/scheduler/binding.dart 778:7    <fn> dart_sdk.js:19110:15
dart:sdk_internal 15773:9                                                                  internalCallback dart_sdk.js:19110:15
════════════════════════════════════════════════════════════════════════════════════════════════════ dart_sdk.js:19110:15

Flutter Web on Firefox is particularly sensitive to this lack of rendering space, but with Chrome either it's not perfectly handled.

In the meantime, it's possible to check for MediaQuery.of(context).size.shortestSide == 0 and avoid building the app, but it doesn't solve everything.

flutter_web version: commit 8d4c12a (June 29)
Mac OS X 10.14.5 18F132, locale en-KR

[yjbanov]

/cc @ferhatb

[ditman]

I took a look and was able to reproduce the issue. Here's what I've found so far:

• This is where we're throwing from: bitmap_canvas.dart: It seems Firefox doesn't like to set .font on a canvas when it's rendering inside a display: none iframe.
• There's a Bugzilla about this same issue.
• Here's a suggestion for a workaround to unblock this while we find a more graceful solution. TL;DR: instead of display: none, "hide" the iframe by making it 1x1 with opacity 0 in some corner of the viewport.

I'm currently looking at finding a better workaround at the framework level, or at the very least, warn the user of why the app is crashing.

Thanks for reporting!

[ditman]

Added a couple of try/catches to prevent this from happening, but as you mentioned, the apps don't look great when rendered hidden and then shown (particularly on Chrome). (It'll land in the next sync from our internal system to this repo).

Rendering problems are probably separate issues, that I haven't fully identified. I'll keep working on them.

[ditman]

This is issue is similar to some of the issues I've seen when rendering on a hidden iframe:

#39151

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