Flutter web app gets blurred on zooming on safari browser

[gauria24]

Flutter web app gets blurred on zooming on safari browser. Attached the video of flutter gallery app.

Steps to reproduce:

1. Launch https://gallery.flutter.dev/#/ in safari browser
2. Zoom the web page using the browser zoom functionality (Cmd + or View, Zoom In)
3. Observed that all text and images are blurred
4. The text and images blurring can be reproduced on locally hosted flutter web applications as well
5. The zooming does not blur the text and images on other browsers like chrome or Edge

flutter doctor command output is as below.
flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.7.5, on macOS 13.2.1 22D68 darwin-x64,
locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version
33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.75.1)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

SafariZoom1.mov

[huycozy]

Hi @gauria24
As far as I can see, it seems this is an intentional result on Safari since other websites are also blurred as well (it is not too blurred for me, though).

Demo

Screen.Recording.2023-02-27.at.16.50.29.mov

Please also try on other websites as well. Also, I am not sure if there is any tool to verify this better, if any, please share it.

[github-actions]

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.

[mfdcoder]

Hi @gauria24 As far as I can see, it seems this is an intentional result on Safari since other websites are also blurred as well (it is not too blurred for me, though).

Demo
Please also try on other websites as well. Also, I am not sure if there is any tool to verify this better, if any, please share it.

The issue is not reproducible on other websites like yahoo.com, linked etc.
@huycozy to see the extent of the blur, please view the video in full screen mode

[gauria24]

Hi @huycozy
I checked with other websites like yahoo, twitter and linkedIn on safari browser and all they look good as intended. There is no blur issue with those websites.

Also please see the attached video on full screen to see blur effect better.

safari_blur_issue.mov

[huycozy]

To make it more intuitive, I took screenshots with maximum zooming of Flutter Gallery and Yahoo on both Safari and Chrome:

Safari:

• Flutter Gallery

• Yahoo

Chrome:

• Flutter Gallery

• Yahoo

I can see Flutter Gallery looks better on Chrome, but Yahoo doesn't.

And taking a look at both websites on Safari, it's hard to see the issue. For a more thorough analysis and to make sure it doesn't depend on a large repository like Flutter Gallery, would you mind you create 2 sample codes (one using Flutter and another is non-Flutter) that represent the same content?

[github-actions]

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.

[github-actions]

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.