iOS platform view is flashing on top of SliverPersistentHeader #86787

ilayda-simsek · 2021-07-21T15:39:21Z

Steps to Reproduce

Clone the project from https://github.com/ilayda-simsek/flutter-sliver-bug
Run the app on an iOS device
Scroll up and down
Observe that the scrollable platform views in the CustomScrollView are flashing on top of the pinned SliverPersistentHeader and the SliverAppBar widgets

Expected results:

The platform view shouldn't be rendered on top of the pinned headers.

Actual results:

Platform view can be seen on top of the pinned SliverAppBar and the SliverPersistentHeader widgets as user scrolls up and down.
The behavior can be seen in the following video. In here, the SliverAppBar and the SliverPersistentHeader are pinned inside a CustomScrollView. The blue ones are iOS Platform Views. The platform view widget appears briefly on top of the SliverAppBar and the SliverPersistentHeader as user scrolls up and down.

Note: Tried on both stable and master channels. Problem was reproducible in both.

Logs

[✓] Flutter (Channel stable, 2.2.3, on macOS 11.4 20F71 darwin-arm, locale
    en-TR)
    • Flutter version 2.2.3 at /Users/ilaydasimsek/Development/flutter
    • Framework revision f4abaa0735 (3 weeks ago), 2021-07-01 12:46:11 -0700
    • Engine revision 241c87ad80
    • Dart version 2.13.4

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/ilaydasimsek/Library/Android/sdk
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Users/ilaydasimsek/Library/Android/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.5, Build version 12E262
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.2)
    • 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 11.0.8+10-b944.6916264)

[✓] Connected device (2 available)
    • iPhone 12 (mobile) • 8EA240E9-5F42-4484-950B-758E90EFDEBF • ios
      • com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • Chrome (web)       • chrome                               • web-javascript
      • Google Chrome 91.0.4472.164

• No issues found!

The text was updated successfully, but these errors were encountered:

TahaTesser · 2021-07-22T13:30:45Z

Hi @ilayda-simsek
Thanks for filing the issue, I can reproduce it

`stable`	`beta`	`dev`	`master`
❌	❌	❌	❌

Check flutter doctor -v outputs for each channel below

flutter doctor -v

[✓] Flutter (Channel stable, 2.2.3, on macOS 12.0 21A5284e darwin-x64, locale
    en-GB)
    • Flutter version 2.2.3 at /Users/tahatesser/Code/flutter_stable
    • Framework revision f4abaa0735 (3 weeks ago), 2021-07-01 12:46:11 -0700
    • Engine revision 241c87ad80
    • Dart version 2.13.4

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/tahatesser/Code/SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Users/tahatesser/Code/SDK
    • Java binary at: /Users/tahatesser/Library/Application
      Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/202.7486908/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.5.1, Build version 12E507
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.2)
    • Android Studio at /Users/tahatesser/Library/Application
      Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/202.7486908/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 11.0.8+10-b944.6916264)

[✓] VS Code (version 1.58.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.24.0

[✓] Connected device (4 available)
    • Taha’s iPhone (mobile) • 00008020-001059882212002E            • ios
      • iOS 14.6
    • iPhone 12 Pro (mobile) • 77C62AB9-8B71-43CF-BCAB-85B0A5B52F85 • ios
      • com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-x64
      • macOS 12.0 21A5284e darwin-x64
    • Chrome (web)           • chrome                               •
      web-javascript • Google Chrome 92.0.4515.107

• No issues found!

[✓] Flutter (Channel beta, 2.3.0-24.1.pre, on macOS 12.0 21A5284e darwin-x64,
    locale en-GB)
    • Flutter version 2.3.0-24.1.pre at /Users/tahatesser/Code/flutter_beta
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 615957513e (4 weeks ago), 2021-06-25 09:24:44 -0700
    • Engine revision 9d517f475b
    • Dart version 2.14.0 (build 2.14.0-188.5.beta)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/tahatesser/Code/SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Users/tahatesser/Code/SDK
    • Java binary at: /Users/tahatesser/Library/Application
      Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/202.7486908/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.5.1, Build version 12E507
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.2)
    • Android Studio at /Users/tahatesser/Library/Application
      Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/202.7486908/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 11.0.8+10-b944.6916264)

[✓] Android Studio (version 4.2)
    • Android Studio at /Users/tahatesser/Library/Application
      Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/202.7486908/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 11.0.8+10-b944.6916264)

[✓] VS Code (version 1.58.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.24.0

[✓] Connected device (4 available)
    • Taha’s iPhone (mobile) • 00008020-001059882212002E            • ios
      • iOS 14.6
    • iPhone 12 Pro (mobile) • 77C62AB9-8B71-43CF-BCAB-85B0A5B52F85 • ios
      • com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-x64
      • macOS 12.0 21A5284e darwin-x64
    • Chrome (web)           • chrome                               •
      web-javascript • Google Chrome 92.0.4515.107

• No issues found!

[✓] Flutter (Channel dev, 2.4.0-4.0.pre, on macOS 12.0 21A5284e darwin-x64,
    locale en-GB)
    • Flutter version 2.4.0-4.0.pre at /Users/tahatesser/Code/flutter_dev
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision cc00e7e6bc (11 days ago), 2021-07-11 18:21:02 -0400
    • Engine revision ed25e8f01e
    • Dart version 2.14.0 (build 2.14.0-301.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/tahatesser/Code/SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Users/tahatesser/Code/SDK
    • Java binary at: /Users/tahatesser/Library/Application
      Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/202.7486908/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.5.1, Build version 12E507
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.2)
    • Android Studio at /Users/tahatesser/Library/Application
      Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/202.7486908/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 11.0.8+10-b944.6916264)

[✓] Android Studio (version 4.2)
    • Android Studio at /Users/tahatesser/Library/Application
      Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/202.7486908/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 11.0.8+10-b944.6916264)

[✓] VS Code (version 1.58.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.24.0

[✓] Connected device (4 available)
    • Taha’s iPhone (mobile) • 00008020-001059882212002E            • ios
      • iOS 14.6 18F72
    • iPhone 12 Pro (mobile) • 77C62AB9-8B71-43CF-BCAB-85B0A5B52F85 • ios
      • com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-x64
      • macOS 12.0 21A5284e darwin-x64
    • Chrome (web)           • chrome                               •
      web-javascript • Google Chrome 92.0.4515.107

• No issues found!

    darwin-x64, locale en-GB)
    • Flutter version 2.4.0-5.0.pre.145 at /Users/tahatesser/Code/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ea4589f714 (8 hours ago), 2021-07-22 01:46:04 -0400
    • Engine revision 269082c333
    • Dart version 2.14.0 (build 2.14.0-341.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/tahatesser/Code/SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Users/tahatesser/Code/SDK
    • Java binary at: /Users/tahatesser/Library/Application
      Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/202.7486908/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.5.1, Build version 12E507
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.2)
    • Android Studio at /Users/tahatesser/Library/Application
      Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/202.7486908/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 11.0.8+10-b944.6916264)

[✓] Android Studio (version 4.2)
    • Android Studio at /Users/tahatesser/Library/Application
      Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/202.7486908/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 11.0.8+10-b944.6916264)

[✓] VS Code (version 1.58.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.24.0

[✓] Connected device (4 available)
    • Taha’s iPhone (mobile) • 00008020-001059882212002E            • ios
      • iOS 14.6 18F72
    • iPhone 12 Pro (mobile) • 77C62AB9-8B71-43CF-BCAB-85B0A5B52F85 • ios
      • com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-x64
      • macOS 12.0 21A5284e darwin-x64
    • Chrome (web)           • chrome                               •
      web-javascript • Google Chrome 92.0.4515.107

• No issues found!

✅ : No Issue ❌: Issue reproduced

jmagman · 2021-07-23T18:07:07Z

@Piinks Can you give any insight as to whether this is a framework/scrolling or engine issue so we can make sure the right team investigates?

Piinks · 2021-07-23T18:21:56Z

Thanks @jmagman, looking now to see where this may be coming from

Piinks · 2021-07-23T18:49:20Z

I think this is an issue with the platform view. I have reduced the code sample down a fair bit, and it looks like the flicker of the platform view widget occurs when flinging very quickly.

Here is a smaller coder repro:

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter/rendering.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: HomeScreen());
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            backgroundColor: Colors.black,
            pinned: true,
            title: Text('SliverAppBar'),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return index.isEven
                  ? Container(height: 120, child: PlatformViewWidget())
                  : Container(
                      height: 120,
                      child: Text('Text from Flutter'),
                    );
              },
              childCount: 16,
            ),
          ),
        ],
      ),
    );
  }
}

class PlatformViewWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Map<String, dynamic> creationParams = <String, dynamic>{};
    if (Platform.isIOS) {
      return UiKitView(
        viewType: 'testView',
        layoutDirection: TextDirection.ltr,
        creationParams: creationParams,
        creationParamsCodec: const StandardMessageCodec(),
      );
    }
    return Container();
  }
}

jmagman · 2021-07-24T01:45:01Z

I wasn't able to reproduce this with a AndroidView. I replaced dev/integration_tests/android_views main.dart with a modified version of @Piinks repro code:

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter/rendering.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: HomeScreen());
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            backgroundColor: Colors.black,
            pinned: true,
            title: Text('SliverAppBar'),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                return index.isEven
                    ? Container(height: 120, child: PlatformViewWidget())
                    : Container(
                  height: 120,
                  child: Text('Text from Flutter'),
                );
              },
              childCount: 16,
            ),
          ),
        ],
      ),
    );
  }
}

class PlatformViewWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AndroidView(
      viewType: 'simple_view',
      layoutDirection: TextDirection.ltr,
    );
  }
}

cyanglaz · 2021-11-18T18:13:15Z

As a workaround, if it is possible, we can use a widget other than SliverAppBar (AppBar maybe?) so that the SliverList doesn't go behind the app bar.

ilayda-simsek · 2021-11-18T18:28:23Z

@cyanglaz Unfortunately, as far as I know, SliverAppBar is the only widget that fits the requirements of our app. We need the app bar to be both floating and not pinned. Additionally, there are some cases where we add other widgets to the scroll view
that come before the app bar. If there is another widget that can provide these functionalities for the app bar I'd be happy to try it out

cyanglaz · 2021-11-18T21:59:36Z

@ilayda-simsek Unfortunately, it seems to be an issue with the engine (PlatformView), so other widgets won't help as long as the scroll view has to go under it. I'm trying to find root cause in engine and will give an update when I find it.

cyanglaz · 2021-11-24T18:43:13Z

Update: the root cause seems to be the zPosition of overlay and platform views are not correct, so sometimes, the overlay (which should cover the platform view) is under the platform view for certain frames. I will work on a fix to ensure the overlays are always on top of the platform view, which should fix this issue.

Edit: @ilayda-simsek fix is ready in the linked PR. Feel free to try it out.

cyanglaz · 2021-12-08T18:45:15Z

The engine fix has rolled into flutter master channel, please give it a try :)

ilayda-simsek · 2021-12-09T16:55:35Z

All looks good, thank you for the fix! @cyanglaz

github-actions · 2021-12-23T17:06:38Z

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.

TahaTesser added the in triage Presently being triaged by the triage team label Jul 22, 2021

timsneath added the customer: product label Jul 23, 2021

jmagman added framework flutter/packages/flutter repository. See also f: labels. and removed engine flutter/engine repository. See also e: labels. labels Jul 23, 2021

jmagman added engine flutter/engine repository. See also e: labels. framework flutter/packages/flutter repository. See also f: labels. and removed framework flutter/packages/flutter repository. See also f: labels. labels Jul 23, 2021

chinmaygarde added the P2 Important issues not at the top of the work list label Jul 26, 2021

jmagman assigned cyanglaz Nov 18, 2021

jmagman added P1 High-priority issues at the top of the work list and removed P2 Important issues not at the top of the work list labels Nov 18, 2021

cyanglaz mentioned this issue Nov 23, 2021

Buggy scroll in WebView inside of the PageView #94028

Open

cyanglaz mentioned this issue Nov 24, 2021

[ios platform view] fix overlay zPosition flutter/engine#29930

Merged

8 tasks

fluttergithubbot closed this as completed in flutter/engine#29930 Dec 8, 2021

github-actions bot locked as resolved and limited conversation to collaborators Dec 23, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

iOS platform view is flashing on top of SliverPersistentHeader #86787

iOS platform view is flashing on top of SliverPersistentHeader #86787

ilayda-simsek commented Jul 21, 2021

TahaTesser commented Jul 22, 2021

jmagman commented Jul 23, 2021

Piinks commented Jul 23, 2021

Piinks commented Jul 23, 2021 •

edited

Loading

jmagman commented Jul 24, 2021

cyanglaz commented Nov 18, 2021

ilayda-simsek commented Nov 18, 2021

cyanglaz commented Nov 18, 2021 •

edited

Loading

cyanglaz commented Nov 24, 2021 •

edited

Loading

cyanglaz commented Dec 8, 2021

ilayda-simsek commented Dec 9, 2021

github-actions bot commented Dec 23, 2021

iOS platform view is flashing on top of SliverPersistentHeader #86787

iOS platform view is flashing on top of SliverPersistentHeader #86787

Comments

ilayda-simsek commented Jul 21, 2021

Steps to Reproduce

TahaTesser commented Jul 22, 2021

jmagman commented Jul 23, 2021

Piinks commented Jul 23, 2021

Piinks commented Jul 23, 2021 • edited Loading

jmagman commented Jul 24, 2021

cyanglaz commented Nov 18, 2021

ilayda-simsek commented Nov 18, 2021

cyanglaz commented Nov 18, 2021 • edited Loading

cyanglaz commented Nov 24, 2021 • edited Loading

cyanglaz commented Dec 8, 2021

ilayda-simsek commented Dec 9, 2021

github-actions bot commented Dec 23, 2021

Piinks commented Jul 23, 2021 •

edited

Loading

cyanglaz commented Nov 18, 2021 •

edited

Loading

cyanglaz commented Nov 24, 2021 •

edited

Loading