Skip to content

[web] flutter-first-frame fires before the first SkWasm frame is presented #189499

Description

@Yusufihsangorgel

Steps to reproduce

  1. Create a Flutter web app that keeps an HTML splash visible until the
    flutter-first-frame browser event.
  2. Build it with flutter build web --release --wasm --no-web-resources-cdn.
  3. Serve it with the COOP/COEP headers required by threaded SkWasm.
  4. In the Dart entrypoint, delay runApp so the transition is easy to record:
import 'package:flutter/material.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Future<void>.delayed(const Duration(milliseconds: 1500));
  runApp(
    const MaterialApp(
      home: ColoredBox(
        color: Color(0xffc7ff00),
        child: Center(child: Text('FIRST APP FRAME')),
      ),
    ),
  );
}
  1. Remove a contrasting HTML splash when the event fires:
<div id="splash">HTML SPLASH</div>
<script>
  window.addEventListener('flutter-first-frame', () => {
    document.getElementById('splash')?.remove();
  }, { once: true });
</script>

Expected result

The event is dispatched only after the renderer has completed the first scene,
so removing the HTML splash reveals the first Flutter frame without an
intermediate blank frame.

Actual result

With Wasm/SkWasm, the framework sends the flutter/service_worker platform
message from a post-frame callback, but the web engine immediately dispatches
flutter-first-frame while renderer.renderScene(...) is still running.
Removing the splash therefore exposes the page background before SkWasm has
finished rasterizing.

Chrome compositor screencasts of the minimal reproduction produced the same
sequence in three cold runs:

Run Blank frame after event First visible Flutter frame
1 +11.3 ms +143.0 ms
2 +7.8 ms +90.3 ms
3 +7.1 ms +117.3 ms

The dart2js/CanvasKit build did not produce the intermediate blank compositor
frame in the same test. The current master implementation still dispatches
the DOM event synchronously in EnginePlatformDispatcher.

This is related to the original service-worker event work in #66066 and the
first-frame hook proposal in #133454, but neither tracks the renderer-completion
race in the Wasm/SkWasm path.

Environment

Flutter 3.41.2 (stable)
Framework revision 90673a4eef
Engine revision 6c0baaebf7
Dart 3.11.0
macOS arm64, Chrome

The same synchronous event dispatch is present at current master
(fc1ad955f16467c959e3cd8079b760d5af0984aa).

Activity

  1. added
    engineflutter/engine related. See also e: labels.
    platform-webWeb applications specifically
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    e: wasmIssues related to the wasm build of Flutter Web.
    e: web_skwasmSkwasm rendering backend for web
    team-webOwned by Web platform team
    on Jul 16, 2026
  2. mbcorona commented on Jul 16, 2026

    @mbcorona
    Member

    Hi @Yusufihsangorgel , thanks for the detailed report, Routing to the webteam to evaluate the issue and Pr linked #189500

  3. Yusufihsangorgel commented on Jul 16, 2026

    @Yusufihsangorgel
    ContributorAuthor

    Hi @Yusufihsangorgel , thanks for the detailed report, Routing to the webteam to evaluate the issue and Pr linked #189500

    Hi, Thanks.

  4. added
    triaged-webTriaged by Web platform team
    P2Important issues not at the top of the work list
    on Jul 22, 2026
  5. added a commit that references this issue on Aug 11, 2026
    def08f4
  6. github-actions commented on Aug 25, 2026

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

  7. locked as resolved and limited conversation to collaborators on Aug 25, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work liste: wasmIssues related to the wasm build of Flutter Web.e: web_skwasmSkwasm rendering backend for webengineflutter/engine related. See also e: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specificallyteam-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