Skip to content

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

Closed
#163688
Closed
Flutter Web: Google Chrome desktop mode shows blank page in portrait#154162
#163688
Assignees
harryterkelsen
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

Description

@ColinSchmale
ColinSchmale
opened on Aug 27, 2024

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!

Activity

  1. danagbemava-nc
    added
    in triagePresently being triaged by the triage team
    on Aug 28, 2024

  2. danagbemava-nc commented on Aug 28, 2024

    @danagbemava-nc
    danagbemava-nc
    on Aug 28, 2024
    Member

    Possibly related to: #136319

    I see the same behavior when I run the app using Wasm or canvaskit, however, it works as expected with the html renderer.
    With the code sample provided above, the view isn't fully rendered (at least when I tested it) in landscape mode (on my emulator), but the view becomes stretched when I switch back from landscape to portrait mode. See the recording below

    Screen.Recording.2024-08-28.at.7.27.46.AM.mov
    flutter doctor -v 
    [✓] Flutter (Channel stable, 3.24.1, on macOS 14.6.1 23G93 darwin-arm64, locale en-US)
    • Flutter version 3.24.1 on channel stable at /Users/deanli/dev/stable
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5874a72aa4 (7 days ago), 2024-08-20 16:46:00 -0500
    • Engine revision c9b9d5780d
    • Dart version 3.5.1
    • DevTools version 2.37.2

    [!] Flutter (Channel master, 3.25.0-1.0.pre.159, on macOS 14.6.1 23G93 darwin-arm64, locale en-US)
    • Flutter version 3.25.0-1.0.pre.159 on channel master at /Users/deanli/dev/master
    ! Warning: `flutter` on your path resolves to /Users/deanli/dev/stable/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/deanli/dev/master. Consider adding /Users/deanli/dev/master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/deanli/dev/stable/bin/dart, which is not inside your current Flutter SDK checkout at /Users/deanli/dev/master. Consider adding /Users/deanli/dev/master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 3379460596 (2 hours ago), 2024-08-27 22:23:18 -0700
    • Engine revision 8d248aead3
    • Dart version 3.6.0 (build 3.6.0-175.0.dev)
    • DevTools version 2.39.0-dev.15
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.
  3. danagbemava-nc
    added
    engineflutter/engine related. See also e: labels.
    platform-webWeb applications specifically
    c: renderingUI glitches reported at the engine/skia or impeller rendering level
    e: web_canvaskitCanvasKit (a.k.a. Skia-on-WebGL) rendering backend for Web
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    browser: chrome-androidonly manifests in Chrome on Android
    e: web_skwasmSkwasm rendering backend for web
    team-webOwned by Web platform team
    found in release: 3.24Found to occur in 3.24
    found in release: 3.25Found to occur in 3.25
    and removed
    in triagePresently being triaged by the triage team
    on Aug 28, 2024
  4. yjbanov
    added
    P2Important issues not at the top of the work list
    triaged-webTriaged by Web platform team
    on Sep 5, 2024

  5. ermejoficoderbigonzo commented on Nov 19, 2024

    @ermejoficoderbigonzo
    ermejoficoderbigonzo
    on Nov 19, 2024

    same problem on all flutter apps!!

  6. nate-thegrate
    marked Any Flutter app doesn't' work when it is in chrome mobile with desktop mode enabled #161507 as a duplicate of this issue on Jan 14, 2025

  7. harryterkelsen commented on Feb 18, 2025

    @harryterkelsen
    harryterkelsen
    on Feb 18, 2025
    Contributor

    I just tried this myself with an Android emulator running Chrome at this site: https://canvaskit-spinning-square.web.app/

    With Chrome 124 when I loaded the app in portrait and rotated to landscape mode, the page went blank except for the spinning platform view and I got these errors in the console:

    [.WebGL-0x2c80463db00] GL_INVALID_OPERATION: Error: 0x00000502, in ../../third_party/angle/src/libANGLE/renderer/gl/RenderbufferGL.cpp, setStorage:57. Internal error: 0x00000502: Unexpected driver error.

[.WebGL-0x2c80463db00] GL_INVALID_FRAMEBUFFER_OPERATION: Framebuffer is incomplete: Attachments are not all the same size.

    After I updated Chrome to latest stable (Chrome 133) on the emulator, I no longer get a blank screen or error messages when rotating from portrait to landscape. However, when I check "Desktop Site" while in portrait mode I get incorrect rendering and
    some error messages.

    Image

    [.WebGL-0x64a03e44700]GL ERROR :GL_INVALID_ENUM : GetIntegerv: <- error from previous GL command

    I'll keep investigating.

  8. github-merge-queue
    added a commit that references this issue on Feb 21, 2025

    [canvaskit] Use `visualViewport.scale` to determine device pixel rati…

    442c241
  9. auto-submit
    closed this as completedin #163688on Feb 21, 2025
  10. danagbemava-nc
    added
    r: fixedIssue is closed as already fixed in a newer version
    on Feb 21, 2025

  11. github-actions commented on Mar 7, 2025

    @github-actions
    github-actionsbot
    on Mar 7, 2025 – with 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.

  12. github-actions
    locked as resolved and limited conversation to collaborators on Mar 7, 2025
  13. harryterkelsen
    self-assigned this
    on Jun 4, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

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