Description

When a PlatformView goes out of screen, and comes back while scrolling underneath a different widget. The Widget flashes and glitches. It is only reproducible on iPhone 13pro.

See:

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.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(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('PlatformView Test'),
        ),
        body: Stack(children: [
          ListView.builder(
              itemCount: 20,
              itemBuilder: (context, index) {
                if (index == 18) {
                  return Container(
                      height: 150,
                      child: const WebView(
                        initialUrl: 'https://google.com',
                      ));
                }
                return Container(color: Colors.blue, width: 200, height: 60);
              }),
          Expanded(
              child: Align(
                  alignment: FractionalOffset.bottomCenter,
                  child:
                      Container(color: Colors.red, width: 500, height: 100))),
        ]),
      ),
    );
  }
}

Steps to reproduce

1. Create a new flutter app. Add google_maps_flutter as a dependency.
2. Register GoogleMap API key
3. Copy the "demo code" below to main.dart
4. Make sure CADisableMinimumFrameDurationOnPhone: true is set in info.plist
5. Run the app, scroll the main screen up until you see the PlatformView showing on screen.
6. Try to scroll the PlatformView towards the bottom and move it out of the screen, then scroll the PlatformView back into the screen. Do it multiple times and see the glitch.

Investigation

There are several Observation and things I have tried:

1. The issue only happens on iPhone 13 pro so it could be related to the ProMotion display Apple introduced with iPhone 13Pro. (It doesn't reproduce on the new IPad, which also has promotion display)
2. Bisected to 0b97874, which enables 120Hz, this commit seems to make the issue more reproducible, set the flutter to a commit prior to this still reproduce the glitch, but a lot less frequently.
3. Based on 2, I think the glitch might be caused by expensive frame exceeding frame budget. With 120hz (enabled in 0b97874), the frame budget is significantly lower, hence it is more likely to reproduce the glitch).
4. Note: this doesn't reproduce on lower end machines, where the frame budget is exceeded constantly.
5. During debugging with local engine, I hit 2 FML_DChecks while trying to reproduce this issue. https://github.com/flutter/engine/blob/main/flow/diff_context.cc#L214 and https://github.com/flutter/engine/blob/main/shell/common/rasterizer.cc#L526 lower end device also hits these FML_DChecks, I but no UI glitch.

Based on the above observation, I think the glitch has something to do with the ProMotion display on iPhone 13pro. Note that the glitch exists even without any custom implementation of Variable Refresh Rate. If we disable Variable Refresh Rate by making CADisableMinimumFrameDurationOnPhone to false, the glitch is more frequent and worse.

The bug behavior looks very similar to #86787; however, #86787 was happening on all devices and fixed by flutter/engine#29930