Repository: flutter
Issue: [web] [canvaskit] janky transition when navigating to a page containing text with emojis 
Labels: engine,platform-web,e: web_canvaskit,has reproducible steps,P2,found in release: 2.5,found in release: 2.6,found in release: 2.8,team-web,triaged-web

## Steps to Reproduce

1. Using the provided sample code, run the app.  
2. Once the app is running, refresh the browser or click enter in the address bar (or hot restart).
3. Click the floating action button to navigate to the second page. 
4. Observe the janky transition as shown in the recording below.
    - Repeat from step 2 if it doesn't show.  

**Actual results:** <!-- what did you see? -->
When there is an emoji in the text, the transition is janky as shown here (3rd one is the worst):

_**This recording is from release mode**_

https://user-images.githubusercontent.com/46427323/143937401-a197934a-9a27-46f4-971b-780cf3950f91.mov

Note: This seems to happen only for the first navigation and only after refreshing the browser. 

<br>

**Expected results:** <!-- what did you want to see? -->
When the emoji is removed from the text, the transition is smooth as shown here: 

https://user-images.githubusercontent.com/46427323/143937912-2434a39d-701f-4296-9368-ee8a933d3716.mov


<details>
<summary>Fully Runnable Code sample</summary>


```dart
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      floatingActionButton: FloatingActionButton.extended(
          onPressed: () {
            Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) {
                  return const SecondPage();
                },
              ),
            );
          },
          label: const Text('Navigate To 2nd Page')),
    );
  }
}

class SecondPage extends StatelessWidget {
  const SecondPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Text(
              'Navigate To Page 🌎',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
    );
  }
}

```

</details>

<details>
  <summary>Flutter Doctor</summary>

```console
[✓] Flutter (Channel stable, 2.5.3, on macOS 11.6 20G165 darwin-x64, locale en)
    • Flutter version 2.5.3 at /Users/osaxma/fvm/versions/stable
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 18116933e7 (6 weeks ago), 2021-10-15 10:46:35 -0700
    • Engine revision d3ea636dc5
    • Dart version 2.14.4

[!] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at /Users/osaxma/Library/Android/sdk
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.5.1, Build version 12E507
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

[✓] VS Code (version 1.62.3)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.28.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 11.6 20G165 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 96.0.4664.55

! Doctor found issues in 1 category.
```

</details>