Full-screen ColorFiltered creates an ultra-thin glitched line on top of the app

[Gieted]

Is there an existing issue for this?

• [X] I have searched the existing issues
• [X] I have read the guide to filing a bug

Steps to reproduce

1. Use Flutter 3.10.1
2. Use Flutter Web
3. Run app with a fullscreen ColorFiltered:

runApp(ColorFiltered(
  colorFilter: const ColorFilter.mode(
  Colors.transparent,
  BlendMode.srcATop,
), child: Container(color: Colors.black)));

4. Open page on a mobile phone
5. Enter fullscreen (can be done via document.documentElement!.requestFullscreen())
6. Tilt your phone, so it has horizontal orientation

Not sure if fullscreen and horizontal mode is really neacesary, but at least for me the line is only visible if I do that (maybe because it's ultra-thin).

Expected results

In the previous release of Flutter (3.7.0), the line didn't appear.

Actual results

The line of one-pixel is display on the very top of the app.

Zoomed image of the line:

The line appears to be a small fragment of Flutter's web loading animation (a blue progress bar), so it might be that the top line of pixels (that normally covers the loading animation) is just not drawn.

Code sample

runApp(ColorFiltered(
  colorFilter: const ColorFilter.mode(
  Colors.transparent,
  BlendMode.srcATop,
), child: Container(color: Colors.black)));

Screenshots or Video

No response

Logs

No response

Flutter Doctor output

Doctor output

```console PS C:\tools\flutter> flutter doctor -v [✓] Flutter (Channel stable, 3.10.1, on Microsoft Windows [Version 10.0.22000.1936], locale pl-PL) • Flutter version 3.10.1 on channel stable at C:\tools\flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision d3d8effc68 (2 days ago), 2023-05-16 17:59:05 -0700 • Engine revision b4fb11214d • Dart version 3.0.1 • DevTools version 2.23.1 [✓] Windows Version (Installed version of Windows is version 10 or higher) [✗] Android toolchain - develop for Android devices ✗ Unable to locate Android SDK. Install Android Studio from: https://developer.android.com/studio/index.html On first launch it will assist you in installing the Android SDK components. (or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions). If the Android SDK has been installed to a custom location, please use `flutter config --android-sdk` to update to that location. [✓] Chrome - develop for the web • CHROME_EXECUTABLE = C:\Program Files\Chromium\Application\chrome.exe [✓] Visual Studio - develop for Windows (Visual Studio Community 2022 17.4.3) • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community • Visual Studio Community 2022 version 17.4.33205.214 • Windows 10 SDK version 10.0.22000.0 [!] Android Studio (not installed) • Android Studio not found; download from https://developer.android.com/studio/index.html (or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions). [✓] IntelliJ IDEA Ultimate Edition (version 2023.1) • IntelliJ at C:\Users\Gieted\AppData\Local\JetBrains\Toolbox\apps\IDEA-U\ch-0\231.9011.34 • Flutter plugin version 73.1.1 • Dart plugin version 231.9065 [✓] Connected device (3 available) • Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.22000.1936] • Chrome (web) • chrome • web-javascript • unknown • Edge (web) • edge • web-javascript • Microsoft Edge 112.0.1722.68 [✓] Network resources • All expected network resources are available. ! Doctor found issues in 2 categories. ```

[huycozy]

Hi @Gieted Just to confirm, are you opening Flutter web page on mobile browser?

I checked this issue on two renders and can see it will render a white screen on html but a black screen on canvaskit mode. I assumed you rendered this on canvaskit so I checked it on mobile as well but can't see the the line you mentioned:

Demo (iOS - safari)


[Gieted]

Hello @huycozy,

I'm using the canvas-kit renderer. The issue is visible only on mobile devices, likely because of their high pixel-density, and it doesn't appear on desktop browsers.

Interestingly, this issue only appears in fullscreen mode and when the device is in landscape orientation. Your screenshot suggests you might not have tested in fullscreen, since the browser bar is still visible.

Also, this issue seems browser-dependent. It doesn't occur in Firefox, but I've spotted it in Opera and Chrome. Reproducing this issue might be tricky, as it could be related to the differing pixel densities and resolutions of various devices.

Though it might appear insignificant, affecting just a single pixel row, it's very noticeable on bright OLED screens.

I'm using Google Pixel 6 phone.

Here's a code snippet you might use for testing:

runApp(GestureDetector(
      onTap: () {
        window.document.documentElement!.requestFullscreen();
        window.screen?.orientation?.lock('landscape');
      },
      child: ColorFiltered(
          colorFilter: const ColorFilter.mode(
            Colors.transparent,
            BlendMode.srcATop,
          ), child: Container(color: Colors.black)),
    ));

[huycozy]

Thanks for your response. I can see the issue on my device Samsung Galaxy Tab A7 Lite (Chrome browser).

Demo screenshot


Complete sample code

```dart import 'dart:html'; import 'package:flutter/material.dart'; void main() { runApp(GestureDetector( onTap: () { window.document.documentElement!.requestFullscreen(); window.screen?.orientation?.lock('landscape'); }, child: ColorFiltered( colorFilter: const ColorFilter.mode( Colors.transparent, BlendMode.srcATop, ), child: Container(color: Colors.black)), )); } ```

Additional info

• The issue is not visible on HTML renderer (because it will display a white screen instead) but on canvaskit renderer
• It seems to be a regression since I can't see issue on Flutter 3.7.12

flutter doctor -v (stable and master)

```bash [✓] Flutter (Channel stable, 3.10.1, on macOS 13.0.1 22A400 darwin-x64, locale en-VN) • Flutter version 3.10.1 on channel stable at /Users/huynq/Documents/GitHub/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision d3d8effc68 (26 hours ago), 2023-05-16 17:59:05 -0700 • Engine revision b4fb11214d • Dart version 3.0.1 • DevTools version 2.23.1 [✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0) • Android SDK at /Users/huynq/Library/Android/sdk • Platform android-33, build-tools 32.0.0 • ANDROID_HOME = /Users/huynq/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 14.3) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 14E222b • CocoaPods version 1.11.3 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2022.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 17.0.6+0-17.0.6b802.4-9586694) [✓] VS Code (version 1.78.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.64.0 [✓] Connected device (3 available) • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64 • Android 11 (API 30) • macOS (desktop) • macos • darwin-x64 • macOS 13.0.1 22A400 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 113.0.5672.126 [✓] Network resources • All expected network resources are available. • No issues found! ``` ```bash [!] Flutter (Channel master, 3.11.0-10.0.pre.44, on macOS 13.0.1 22A400 darwin-x64, locale en-VN) • Flutter version 3.11.0-10.0.pre.44 on channel master at /Users/huynq/Documents/GitHub/flutter_master ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path. ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path. • Upstream repository https://github.com/flutter/flutter.git • Framework revision ab573048e7 (35 hours ago), 2023-05-20 11:32:26 -0400 • Engine revision aac0919568 • Dart version 3.1.0 (build 3.1.0-129.0.dev) • DevTools version 2.23.1 • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades. [✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0) • Android SDK at /Users/huynq/Library/Android/sdk • Platform android-33, build-tools 32.0.0 • ANDROID_HOME = /Users/huynq/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 14.3) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 14E222b • CocoaPods version 1.11.3 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2022.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 17.0.6+0-17.0.6b802.4-9586694) [✓] VS Code (version 1.78.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.64.0 [✓] Connected device (2 available) • macOS (desktop) • macos • darwin-x64 • macOS 13.0.1 22A400 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 113.0.5672.126 [✓] Network resources • All expected network resources are available. ! Doctor found issues in 1 category. ```

[yjbanov]

@huycozy that last screenshot seems to be from macOS AOT build? Trying to understand if this is a web-specific issue or Flutter-wide, perhaps a Skia bug.

[huycozy]

@yjbanov It's reproducible on Web only in full-screen mode while it doesn't happen on macOS platform.

The screenshot I provided is for Web on mobile browser (I usually use scrcpy to cast screen from mobile to macOS). It will be easier to spot if we look through the device (not through the screenshot). I've highlighted the issue signed with a red-bordered rectangle in the screenshot above.

[github-actions[bot]]

Without additional information, we are unfortunately not sure how to resolve this issue. We are therefore reluctantly going to close this bug for now. If you find this problem please file a new issue with the same description, what happens, logs and the output of 'flutter doctor -v'. All system setups can be slightly different so it's always better to open new issues and reference the related ones. Thanks for your contribution.

[yjbanov]

Thanks for confirming!

[steniooliv]

I'm not using flutter web, but...

I have the same problem using the iOS Simulator and a physical Android device.

When I scroll, the top line disappears and a lower one appears, and as I scroll, both alternate.

flutter doctor

``` Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 3.16.5, on macOS 13.6 22G120 darwin-arm64, locale en-BR) [✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2) [✓] Xcode - develop for iOS and macOS (Xcode 14.2) [✓] Chrome - develop for the web [✓] Android Studio (version 2022.1) [✓] VS Code (version 1.85.1) [✓] Connected device (4 available) [✓] Network resources • No issues found! ```

Code sample

``` ColorFiltered( colorFilter: const ColorFilter.mode( Colors.gray, BlendMode.saturation, ), child: SvgImage.asse(...), ), ```