Skip to content

Flutter Web: Google Chrome desktop mode shows blank page in portrait #154162

@ColinSchmale

Description

@ColinSchmale

Steps to reproduce

Open any Flutter web app (like https://flutterweb-wasm.web.app/) on Android (real device or emulator) with Google Chrome, desktop mode and portrait. When I load the app in landscape, it loads. When I switch from landscape to portrait, the app loads but is distorted. This issue does not exist when I build the app as HTML.

Expected results

Web app is displayed as desktop version.

Actual results

Blank page is displayed.

Code sample

Code sample
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

Logs
(index):38 Injecting <script> tag. Using callback.
Fetch finished loading: GET "<URL>".
Fetch finished loading: GET "<URL>".
Fetch finished loading: GET "<URL>".
Fetch finished loading: GET "<URL>".
Fetch finished loading: GET "<URL>".
Fetch finished loading: GET "<URL>".
Fetch finished loading: GET "<URL>".
Fetch finished loading: GET "<URL>".
browser_client.dart:101 XHR finished loading: GET "http://192.168.178.40:5050/version.json?cachebuster=1724745095244".
send @ browser_client.dart:101
(anonymous) @ async_patch.dart:45
runUnary @ zone.dart:1661
handleValue @ future_impl.dart:163
handleValueCallback @ future_impl.dart:847
_propagateToListeners @ future_impl.dart:876
[_completeWithValue] @ future_impl.dart:652
(anonymous) @ future_impl.dart:722
_microtaskLoop @ schedule_microtask.dart:40
_startMicrotaskLoop @ schedule_microtask.dart:49
(anonymous) @ async_patch.dart:181
Promise.then
_scheduleImmediateWithPromise @ async_patch.dart:179
_scheduleImmediate @ async_patch.dart:151
_scheduleAsyncCallback @ schedule_microtask.dart:69
_rootScheduleMicrotask @ zone.dart:1466
scheduleMicrotask @ zone.dart:1681
[_asyncCompleteWithValue] @ future_impl.dart:721
[_asyncComplete] @ future_impl.dart:681
_Future.immediate @ future_impl.dart:291
value @ future.dart:348
_engine.EngineFlutterWindow.__ @ window.dart:582
implicit @ window.dart:65
ensureImplicitViewInitialized @ window.dart:709
initializeEngineUi @ initialization.dart:228
runBody @ async_patch.dart:84
_async @ async_patch.dart:127
initializeEngineUi @ initialization.dart:208
(anonymous) @ initialization.dart:39
runBody @ async_patch.dart:84
_async @ async_patch.dart:127
(anonymous) @ initialization.dart:35
_checkAndCall @ operations.dart:426
callMethod @ operations.dart:494
dsend @ operations.dart:498
(anonymous) @ app_bootstrap.dart:57
runBody @ async_patch.dart:84
_async @ async_patch.dart:127
(anonymous) @ app_bootstrap.dart:56
(anonymous) @ js_loader.dart:74
_checkAndCall @ operations.dart:426
dcall @ operations.dart:431
ret @ js_allow_interop_patch.dart:17
(anonymous) @ (index):38
Promise.then
i @ (index):38
didCreateEngineInitializer @ (index):38
bootstrapEngine @ initialization.dart:52
runBody @ async_patch.dart:84
_async @ async_patch.dart:127
bootstrapEngine @ initialization.dart:27
main @ web_entrypoint.dart:19
runBody @ async_patch.dart:84
_async @ async_patch.dart:127
main$ @ web_entrypoint.dart:18
(anonymous) @ main_module.bootstrap.js:18
execCb @ require.js:1696
check @ require.js:883
(anonymous) @ require.js:1139
(anonymous) @ require.js:134
(anonymous) @ require.js:1189
each @ require.js:59
emit @ require.js:1188
check @ require.js:938
(anonymous) @ require.js:1139
(anonymous) @ require.js:134
(anonymous) @ require.js:1189
each @ require.js:59
emit @ require.js:1188
check @ require.js:938
(anonymous) @ require.js:1139
(anonymous) @ require.js:134
(anonymous) @ require.js:1189
each @ require.js:59
emit @ require.js:1188
check @ require.js:938
(anonymous) @ require.js:1139
(anonymous) @ require.js:134
(anonymous) @ require.js:1189
each @ require.js:59
emit @ require.js:1188
check @ require.js:938
(anonymous) @ require.js:1139
(anonymous) @ require.js:134
(anonymous) @ require.js:1189
each @ require.js:59
emit @ require.js:1188
check @ require.js:938
(anonymous) @ require.js:1139
(anonymous) @ require.js:134
(anonymous) @ require.js:1189
each @ require.js:59
emit @ require.js:1188
check @ require.js:938
(anonymous) @ require.js:1139
(anonymous) @ require.js:134
(anonymous) @ require.js:1189
each @ require.js:59
emit @ require.js:1188
check @ require.js:938
(anonymous) @ require.js:1139
(anonymous) @ require.js:134
(anonymous) @ require.js:1189
each @ require.js:59
emit @ require.js:1188
check @ require.js:938
(anonymous) @ require.js:1139
(anonymous) @ require.js:134
(anonymous) @ require.js:1189
each @ require.js:59
emit @ require.js:1188
check @ require.js:938
(anonymous) @ require.js:1139
(anonymous) @ require.js:134
(anonymous) @ require.js:1189
each @ require.js:59
emit @ require.js:1188
check @ require.js:938
(anonymous) @ require.js:1139
(anonymous) @ require.js:134
(anonymous) @ require.js:1189
each @ require.js:59
emit @ require.js:1188
check @ require.js:938
(anonymous) @ require.js:1139
(anonymous) @ require.js:134
(anonymous) @ require.js:1189
each @ require.js:59
emit @ require.js:1188
check @ require.js:938
(anonymous) @ require.js:1139
(anonymous) @ require.js:134
(anonymous) @ require.js:1189
each @ require.js:59
emit @ require.js:1188
check @ require.js:938
enable @ require.js:1176
init @ require.js:788
callGetModule @ require.js:1203
completeLoad @ require.js:1590
onScriptLoad @ require.js:1717
load
req.load @ require.js:1942
load @ require.js:1685
load @ require.js:834
fetch @ require.js:824
check @ require.js:856
enable @ require.js:1176
enable @ require.js:1557
(anonymous) @ require.js:1161
(anonymous) @ require.js:134
each @ require.js:59
enable @ require.js:1113
init @ require.js:788
callGetModule @ require.js:1203
completeLoad @ require.js:1590
onScriptLoad @ require.js:1717
load
req.load @ require.js:1942
load @ require.js:1685
load @ require.js:834
fetch @ require.js:824
check @ require.js:856
enable @ require.js:1176
enable @ require.js:1557
(anonymous) @ require.js:1161
(anonymous) @ require.js:134
each @ require.js:59
enable @ require.js:1113
init @ require.js:788
callGetModule @ require.js:1203
completeLoad @ require.js:1590
onScriptLoad @ require.js:1717
load
req.load @ require.js:1942
load @ require.js:1685
load @ require.js:834
fetch @ require.js:824
check @ require.js:856
enable @ require.js:1176
enable @ require.js:1557
(anonymous) @ require.js:1161
(anonymous) @ require.js:134
each @ require.js:59
enable @ require.js:1113
init @ require.js:788
callGetModule @ require.js:1203
completeLoad @ require.js:1590
onScriptLoad @ require.js:1717
load
req.load @ require.js:1942
load @ require.js:1685
load @ require.js:834
fetch @ require.js:824
check @ require.js:856
enable @ require.js:1176
enable @ require.js:1557
(anonymous) @ require.js:1161
(anonymous) @ require.js:134
each @ require.js:59
enable @ require.js:1113
init @ require.js:788
callGetModule @ require.js:1203
completeLoad @ require.js:1590
onScriptLoad @ require.js:1717
load
req.load @ require.js:1942
load @ require.js:1685
load @ require.js:834
fetch @ require.js:824
check @ require.js:856
enable @ require.js:1176
enable @ require.js:1557
(anonymous) @ require.js:1161
(anonymous) @ require.js:134
each @ require.js:59
enable @ require.js:1113
init @ require.js:788
callGetModule @ require.js:1203
completeLoad @ require.js:1590
onScriptLoad @ require.js:1717
load
req.load @ require.js:1942
load @ require.js:1685
load @ require.js:834
fetch @ require.js:824
check @ require.js:856
enable @ require.js:1176
enable @ require.js:1557
(anonymous) @ require.js:1161
(anonymous) @ require.js:134
each @ require.js:59
enable @ require.js:1113
init @ require.js:788
callGetModule @ require.js:1203
completeLoad @ require.js:1590
onScriptLoad @ require.js:1717
load
req.load @ require.js:1942
load @ require.js:1685
load @ require.js:834
fetch @ require.js:824
check @ require.js:856
enable @ require.js:1176
enable @ require.js:1557
(anonymous) @ require.js:1161
(anonymous) @ require.js:134
each @ require.js:59
enable @ require.js:1113
init @ require.js:788
callGetModule @ require.js:1203
completeLoad @ require.js:1590
onScriptLoad @ require.js:1717
load
req.load @ require.js:1942
load @ require.js:1685
load @ require.js:834
fetch @ require.js:824
check @ require.js:856
enable @ require.js:1176
enable @ require.js:1557
(anonymous) @ require.js:1161
(anonymous) @ require.js:134
each @ require.js:59
enable @ require.js:1113
init @ require.js:788
callGetModule @ require.js:1203
completeLoad @ require.js:1590
onScriptLoad @ require.js:1717
load
req.load @ require.js:1942
load @ require.js:1685
load @ require.js:834
fetch @ require.js:824
check @ require.js:856
enable @ require.js:1176
enable @ require.js:1557
(anonymous) @ require.js:1161
(anonymous) @ require.js:134
each @ require.js:59
enable @ require.js:1113
init @ require.js:788
callGetModule @ require.js:1203
completeLoad @ require.js:1590
onScriptLoad @ require.js:1717
load
req.load @ require.js:1942
load @ require.js:1685
load @ require.js:834
fetch @ require.js:824
check @ require.js:856
enable @ require.js:1176
enable @ require.js:1557
(anonymous) @ require.js:1161
(anonymous) @ require.js:134
each @ require.js:59
enable @ require.js:1113
init @ require.js:788
callGetModule @ require.js:1203
completeLoad @ require.js:1590
onScriptLoad @ require.js:1717
load
req.load @ require.js:1942
load @ require.js:1685
load @ require.js:834
fetch @ require.js:824
check @ require.js:856
enable @ require.js:1176
enable @ require.js:1557
(anonymous) @ require.js:1161
(anonymous) @ require.js:134
each @ require.js:59
enable @ require.js:1113
init @ require.js:788
callGetModule @ require.js:1203
completeLoad @ require.js:1590
onScriptLoad @ require.js:1717
load
req.load @ require.js:1942
load @ require.js:1685
load @ require.js:834
fetch @ require.js:824
check @ require.js:856
enable @ require.js:1176
enable @ require.js:1557
(anonymous) @ require.js:1161
(anonymous) @ require.js:134
each @ require.js:59
enable @ require.js:1113
init @ require.js:788
(anonymous) @ require.js:1460
setTimeout
req.nextTick @ require.js:1815
localRequire @ require.js:1449
configure @ require.js:1387
requirejs @ require.js:1794
(anonymous) @ require.js:2144
(anonymous) @ require.js:2145
developer_patch.dart:88 registerExtension() from dart:developer is only supported in build/run/test environments where the developer event method hooks have been set by package:dwds v11.1.0 or higher.
_registerExtension @ developer_patch.dart:88
registerExtension$ @ extension.dart:126
initializeEngineServices @ initialization.dart:136
runBody @ async_patch.dart:84
_async @ async_patch.dart:127
initializeEngineServices @ initialization.dart:110
(anonymous) @ initialization.dart:34
runBody @ async_patch.dart:84
_async @ async_patch.dart:127
(anonymous) @ initialization.dart:33
(anonymous) @ app_bootstrap.dart:48
runBody @ async_patch.dart:84
_async @ async_patch.dart:127
(anonymous) @ app_bootstrap.dart:47
(anonymous) @ js_loader.dart:56
_checkAndCall @ operations.dart:426
dcall @ operations.dart:431
ret @ js_allow_interop_patch.dart:17
i @ (index):38
didCreateEngineInitializer @ (index):38
bootstrapEngine @ initialization.dart:52
runBody @ async_patch.dart:84
_async @ async_patch.dart:127
bootstrapEngine @ initialization.dart:27
main @ web_entrypoint.dart:19
runBody @ async_patch.dart:84
_async @ async_patch.dart:127
main$ @ web_entrypoint.dart:18
(anonymous) @ main_module.bootstrap.js:18
execCb @ require.js:1696
check @ require.js:883
(anonymous) @ require.js:1139
(anonymous) @ require.js:134
(anonymous) @ require.js:1189
each @ require.js:59
emit @ require.js:1188
check @ require.js:938
(anonymous) @ require.js:1139
(anonymous) @ require.js:134
(anonymous) @ require.js:1189
each @ require.js:59
emit @ require.js:1188
check @ require.js:938
(anonymous) @ require.js:1139
(anonymous) @ require.js:134
(anonymous) @ require.js:1189
each @ require.js:59
emit @ require.js:1188
check @ require.js:938
(anonymous) @ require.js:1139
(anonymous) @ require.js:134
(anonymous) @ require.js:1189
each @ require.js:59
emit @ require.js:1188
check @ require.js:938
(anonymous) @ require.js:1139
(anonymous) @ require.js:134
(anonymous) @ require.js:1189
each @ require.js:59
emit @ require.js:1188
check @ require.js:938
(anonymous) @ require.js:1139
(anonymous) @ require.js:134
(anonymous) @ require.js:1189
each @ require.js:59
emit @ require.js:1188
check @ require.js:938
(anonymous) @ require.js:1139
(anonymous) @ require.js:134
(anonymous) @ require.js:1189
each @ require.js:59
emit @ require.js:1188
check @ require.js:938
(anonymous) @ require.js:1139
(anonymous) @ require.js:134
(anonymous) @ require.js:1189
each @ require.js:59
emit @ require.js:1188
check @ require.js:938
(anonymous) @ require.js:1139
(anonymous) @ require.js:134
(anonymous) @ require.js:1189
each @ require.js:59
emit @ require.js:1188
check @ require.js:938
(anonymous) @ require.js:1139
(anonymous) @ require.js:134
(anonymous) @ require.js:1189
each @ require.js:59
emit @ require.js:1188
check @ require.js:938
(anonymous) @ require.js:1139
(anonymous) @ require.js:134
(anonymous) @ require.js:1189
each @ require.js:59
emit @ require.js:1188
check @ require.js:938
(anonymous) @ require.js:1139
(anonymous) @ require.js:134
(anonymous) @ require.js:1189
each @ require.js:59
emit @ require.js:1188
check @ require.js:938
(anonymous) @ require.js:1139
(anonymous) @ require.js:134
(anonymous) @ require.js:1189
each @ require.js:59
emit @ require.js:1188
check @ require.js:938
enable @ require.js:1176
init @ require.js:788
callGetModule @ require.js:1203
completeLoad @ require.js:1590
onScriptLoad @ require.js:1717
load
req.load @ require.js:1942
load @ require.js:1685
load @ require.js:834
fetch @ require.js:824
check @ require.js:856
enable @ require.js:1176
enable @ require.js:1557
(anonymous) @ require.js:1161
(anonymous) @ require.js:134
each @ require.js:59
enable @ require.js:1113
init @ require.js:788
callGetModule @ require.js:1203
completeLoad @ require.js:1590
onScriptLoad @ require.js:1717
load
req.load @ require.js:1942
load @ require.js:1685
load @ require.js:834
fetch @ require.js:824
check @ require.js:856
enable @ require.js:1176
enable @ require.js:1557
(anonymous) @ require.js:1161
(anonymous) @ require.js:134
each @ require.js:59
enable @ require.js:1113
init @ require.js:788
callGetModule @ require.js:1203
completeLoad @ require.js:1590
onScriptLoad @ require.js:1717
load
req.load @ require.js:1942
load @ require.js:1685
load @ require.js:834
fetch @ require.js:824
check @ require.js:856
enable @ require.js:1176
enable @ require.js:1557
(anonymous) @ require.js:1161
(anonymous) @ require.js:134
each @ require.js:59
enable @ require.js:1113
init @ require.js:788
callGetModule @ require.js:1203
completeLoad @ require.js:1590
onScriptLoad @ require.js:1717
load
req.load @ require.js:1942
load @ require.js:1685
load @ require.js:834
fetch @ require.js:824
check @ require.js:856
enable @ require.js:1176
enable @ require.js:1557
(anonymous) @ require.js:1161
(anonymous) @ require.js:134
each @ require.js:59
enable @ require.js:1113
init @ require.js:788
callGetModule @ require.js:1203
completeLoad @ require.js:1590
onScriptLoad @ require.js:1717
load
req.load @ require.js:1942
load @ require.js:1685
load @ require.js:834
fetch @ require.js:824
check @ require.js:856
enable @ require.js:1176
enable @ require.js:1557
(anonymous) @ require.js:1161
(anonymous) @ require.js:134
each @ require.js:59
enable @ require.js:1113
init @ require.js:788
callGetModule @ require.js:1203
completeLoad @ require.js:1590
onScriptLoad @ require.js:1717
load
req.load @ require.js:1942
load @ require.js:1685
load @ require.js:834
fetch @ require.js:824
check @ require.js:856
enable @ require.js:1176
enable @ require.js:1557
(anonymous) @ require.js:1161
(anonymous) @ require.js:134
each @ require.js:59
enable @ require.js:1113
init @ require.js:788
callGetModule @ require.js:1203
completeLoad @ require.js:1590
onScriptLoad @ require.js:1717
load
req.load @ require.js:1942
load @ require.js:1685
load @ require.js:834
fetch @ require.js:824
check @ require.js:856
enable @ require.js:1176
enable @ require.js:1557
(anonymous) @ require.js:1161
(anonymous) @ require.js:134
each @ require.js:59
enable @ require.js:1113
init @ require.js:788
callGetModule @ require.js:1203
completeLoad @ require.js:1590
onScriptLoad @ require.js:1717
load
req.load @ require.js:1942
load @ require.js:1685
load @ require.js:834
fetch @ require.js:824
check @ require.js:856
enable @ require.js:1176
enable @ require.js:1557
(anonymous) @ require.js:1161
(anonymous) @ require.js:134
each @ require.js:59
enable @ require.js:1113
init @ require.js:788
callGetModule @ require.js:1203
completeLoad @ require.js:1590
onScriptLoad @ require.js:1717
load
req.load @ require.js:1942
load @ require.js:1685
load @ require.js:834
fetch @ require.js:824
check @ require.js:856
enable @ require.js:1176
enable @ require.js:1557
(anonymous) @ require.js:1161
(anonymous) @ require.js:134
each @ require.js:59
enable @ require.js:1113
init @ require.js:788
callGetModule @ require.js:1203
completeLoad @ require.js:1590
onScriptLoad @ require.js:1717
load
req.load @ require.js:1942
load @ require.js:1685
load @ require.js:834
fetch @ require.js:824
check @ require.js:856
enable @ require.js:1176
enable @ require.js:1557
(anonymous) @ require.js:1161
(anonymous) @ require.js:134
each @ require.js:59
enable @ require.js:1113
init @ require.js:788
callGetModule @ require.js:1203
completeLoad @ require.js:1590
onScriptLoad @ require.js:1717
load
req.load @ require.js:1942
load @ require.js:1685
load @ require.js:834
fetch @ require.js:824
check @ require.js:856
enable @ require.js:1176
enable @ require.js:1557
(anonymous) @ require.js:1161
(anonymous) @ require.js:134
each @ require.js:59
enable @ require.js:1113
init @ require.js:788
callGetModule @ require.js:1203
completeLoad @ require.js:1590
onScriptLoad @ require.js:1717
load
req.load @ require.js:1942
load @ require.js:1685
load @ require.js:834
fetch @ require.js:824
check @ require.js:856
enable @ require.js:1176
enable @ require.js:1557
(anonymous) @ require.js:1161
(anonymous) @ require.js:134
each @ require.js:59
enable @ require.js:1113
init @ require.js:788
(anonymous) @ require.js:1460
setTimeout
req.nextTick @ require.js:1815
localRequire @ require.js:1449
configure @ require.js:1387
requirejs @ require.js:1794
(anonymous) @ require.js:2144
(anonymous) @ require.js:2145
isolate_helper.dart:43 [Violation] 'setTimeout' handler took 215ms
isolate_helper.dart:43 [Violation] 'setTimeout' handler took 123ms
js_allow_interop_patch.dart:17 [Violation] 'requestAnimationFrame' handler took 224ms
js_allow_interop_patch.dart:17 [Violation] 'requestAnimationFrame' handler took 82ms
js_allow_interop_patch.dart:17 [Violation] 'requestAnimationFrame' handler took 102ms

Flutter Doctor output

Doctor output
[✓] Flutter (Channel stable, 3.22.3, on macOS 14.5 23F79 darwin-arm64, locale de-DE)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2023.3)
[✓] VS Code (version 1.92.2)
[✓] Connected device (4 available)
[✓] Network resources

• No issues found!

Metadata

Metadata

Labels

P2Important issues not at the top of the work listbrowser: chrome-androidonly manifests in Chrome on Androidc: renderingUI glitches reported at the engine/skia or impeller rendering levele: web_canvaskitCanvasKit (a.k.a. Skia-on-WebGL) rendering backend for Webe: web_skwasmSkwasm rendering backend for webengineflutter/engine related. See also e: labels.found in release: 3.24Found to occur in 3.24found in release: 3.25Found to occur in 3.25has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specificallyr: fixedIssue is closed as already fixed in a newer versionteam-webOwned by Web platform teamtriaged-webTriaged by Web platform team

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions