Open Gieted opened 1 year ago
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:
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)),
));
Thanks for your response. I can see the issue on my device Samsung Galaxy Tab A7 Lite
(Chrome browser).
@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.
@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.
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.
Thanks for confirming!
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.
Is there an existing issue for this?
Steps to reproduce
document.documentElement!.requestFullscreen()
)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:![obraz](https://github.com/flutter/flutter/assets/35242233/95aa064a-c5bd-468b-b487-5b1b82f70a9d)
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
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. ```