Closed indigothm closed 4 years ago
am facing this issue in Chrome as well.
I have reproduced this issue in Flutter's shrine web app also.
@viduthalai , in Chrome it happens only when the dev tools are opened (very unlikely scenario for end-users).
In Safari it still happens for:
Flutter 1.13.9-pre.59 • channel master • https://github.com/flutter/flutter.git
Framework • revision ab36346af6 (22 hours ago) • 2020-01-11 14:20:05 -0500
Engine • revision 3d37d39d95
Tools • Dart 2.8.0 (build 2.8.0-dev.0.0 395daaa3ec)
Experiencing same issue. Chrome with devtools open, or Safari all the time images flickering in and out. Can reproduce for dev and release builds.
Indeed, the experience on Safari on a macOS laptop is quite far from that on Chrome, Firefox, and Opera. Luckily is not flickering on phones and tablets (on iOS and iPadOS)...
Just to add, I do get the same flickering on iOS.
Just to add, I do get the same flickering on iOS.
@rpk98c, you can add some info for the Flutter team to check it out (actual device/OS version/browser version/Flutter version).
@Constans Good point.
I see this issue, very pronounced, on the following:
Flutter Target Platform Web
Target OS version/browser/device macOS 10.14.6 Safari 13.0.5, iMac iOS 13.1.3 Safari, iPhone 10
Output from flutter doctor
[✓] Flutter (Channel master, v1.15.4-pre.99, on Mac OS X 10.14.6 18G95, locale en-GB)
[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
[✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 3.5)
[!] IntelliJ IDEA Ultimate Edition (version 2017.3.5)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] VS Code (version 1.42.0)
[✓] Connected device (2 available)
! Doctor found issues in 2 categories.
I also tried on beta
channel with same results.
Thanks
So this happens on the dev channel as well?
Reporting issues that are on the master channel might be sometime useless due to the perpetual WIP status of that branch (at least on the vx.y.x.-pre.## releases).
I test on an iPhone SE and on an iPad Air 2 and see no flickering (all with the latest available updates OS/Safari version).
It happens on beta
and master
one of which is needed for web support. I've first spotted on beta and then moved to master to see if the issue had been resolved.
I'll test on both channels on various devices and see if I can get a more accurate picture. I believe it's the previous web issue of the wrong paint order for a stack, with the background of a container being drawn over the image to cause the flicker. Let me dig and post more later today/
@Constans Do you have sample image url's that fail?
I've discovered the URL can change the behaviour. My images are stored in Firebase Storage and all flicker, but if I move them to a different server the flickering completely disappears.
So it could be headers or a difference in the way the image is served?
Sample URL for image that flickers:
Sample URL for image that does not flicker:
https://marmoset.digital/img/theme_whitmore-park_x2.0_images_menu_whitmore_park_logo.png?alt=media
The file is the same, but headers are slightly different.
Thanks,
Ryan
@Constans Just noticed you're using firebase storage for your images too. Could you test with them somewhere else?
Sorry, @rpk98c, I was out of the loop.
I don't use firebase storage. The issues I get are with files stored on S3 type storage (CDN backed by DigitalOcean). The images are served over HTTPS.
I had issues with playing MP4 videos on iOS devices with Safari. Technically supported in the browser there was a problem with the hosting servers. The problem is that the servers don't support byte-range requests.
@indigothm uses firebase storage.
As an update, my issue was related to invalid CacheControl headers on my files. Even though Image.network says these are ignore on the web, and they appear to be in Chrome, when in Safari this was the cause of the flickering. Updating the cache headers to a long expiry time has resolved for me.
@indigothm I've taken a look at your images and you're returning cache-control: private, max-age=0
as a header. If you update this to allow caching I think the flicker will be resolved.
@indigothm I've taken a look at your images and you're returning
cache-control: private, max-age=0
as a header. If you update this to allow caching I think the flicker will be resolved.
Where exactly can I update these values? I'm a bit of a noobie in this area.
@indigothm I've taken a look at your images and you're returning
cache-control: private, max-age=0
as a header. If you update this to allow caching I think the flicker will be resolved.Where exactly can I update these values? I'm a bit of a noobie in this area.
@kartabya, on the server-side (the server that hosts your images). There's a short read on the matter here: https://en.wikipedia.org/wiki/Web_cache#Cache-control The setup is different, depending on the technology used on the server-side, but the mechanics are the same.
I have the same problem, cache is set to public, max-age=3600 (and it is served from Memory Cache):
Summary
URL: https://eat.aahi.io/assets/assets/svg_icons/heart.svg
Status: 200
Source: Memory Cache
Initiator:
html_image_codec.dart:39
Request
No request, served from the memory cache.
Response
Content-Encoding: br
Cache-Control: public, max-age=3600
Vary: Accept-Encoding
Date: Tue, 12 May 2020 12:11:46 GMT
Expires: Tue, 12 May 2020 13:11:46 GMT
Content-Type: image/svg+xml
ETag: W/"e8ef9f2b5a704079e21791b5e28b69a7"
Last-Modified: Thu, 16 Apr 2020 11:10:09 GMT
Server: cloudflare
x-goog-stored-content-encoding: identity
x-goog-generation: 1587035409202316
x-goog-meta-goog-reserved-file-mtime: 1586877134
x-goog-storage-class: STANDARD
x-guploader-uploadid: AAANsUkyJanJlNlpaPCAXdt7iy0aUHo3B_1uXKkcfp80ThLlM7xGFGO9YceXQR2BMv3EmzdMutaQFjNfWMpw1tFkNcoa6HSUaQ
x-goog-stored-content-length: 1523
x-goog-hash: crc32c=oJE5ZA==, md5=6O+fK1pwQHniF5G14otppw==
x-goog-metageneration: 1
cf-request-id: 02aa6565690000fa7c400cd200000001
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
cf-cache-status: MISS
cf-ray: 59240b4f0993fa7c-AMS
I have the same issue
@Constans Do you have sample image url's that fail?
I've discovered the URL can change the behaviour. My images are stored in Firebase Storage and all flicker, but if I move them to a different server the flickering completely disappears.
So it could be headers or a difference in the way the image is served?
Sample URL for image that flickers:
Sample URL for image that does not flicker:
https://marmoset.digital/img/theme_whitmore-park_x2.0_images_menu_whitmore_park_logo.png?alt=media
The file is the same, but headers are slightly different.
Thanks,
Ryan
The issue is related with firebase in my case
Yes, ok, I found a way how to reproduce the bug: just disable cache in Chrome devtools Network tab and you get the flickers.
Yes but I'm asking this for my client work. How can I configure the images such that it works fine for everyone, not just my browser?
On Wed, May 13, 2020 at 11:34 AM Alexis Yushin notifications@github.com wrote:
Yes, ok, I found a way how to reproduce the bug: just disable cache in Chrome devtools Network tab and you get the flickers.
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/flutter/flutter/issues/48373#issuecomment-627760580, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMIIV7VCCWQNOHI6OJANKZDRRIYF5ANCNFSM4KECWMAQ .
--
Kartabya Aryal Kathmandu, Nepal
There seems to be a bug introduced in version 1.19.0-1.0.pre that messes every image in ListViews (as far as I experienced).
@kartabya, you should just revert to the 1.19.0-0.0.pre using flutter version 1.19.0-0.0.pre
or flutter downgrade
as a temporary fix.
And remember that you should not use beta tools in prod, because you'll get burned with such issues.
I'm on Flutter 1.19.0-0.0.pre • channel dev
and the issue is still here. Can't go to stable because then FlatButton with color won't work :-/
There seems to be a bug introduced in version 1.19.0-1.0.pre that messes every image in ListViews (as far as I experienced).
Yes, something is really broken in 1.19.0-1.0.pre with images, I had to revert back to 1.18.0-13.0.pre
I'm on
Flutter 1.19.0-0.0.pre • channel dev
and the issue is still here. Can't go to stable because then FlatButton with color won't work :-/
In Safari they flicker. In Chrome, they don't. The reasons are discussed above (other than the weird new issues introduced in version 1.19.0-1.0.pre).
Note that on Chrome they'll always flicker if you have your dev tools opened in browser...
There seems to be a bug introduced in version 1.19.0-1.0.pre that messes every image in ListViews (as far as I experienced).
Yes, something is really broken in 1.19.0-1.0.pre with images, I had to revert back to 1.18.0-13.0.pre
1.19.0-0.0.pre is safe from my tests.
I think we need to open new issue about 1.19.0-1.0.pre, images in ListViews are broken in Chrome (without dev tools open) and everything is flickering as crazy.
I think we need to open new issue about 1.19.0-1.0.pre, images in ListViews are broken in Chrome (without dev tools open) and everything is flickering as crazy.
Done that. I'm not sure there isn't another one already opened, but it'll be marked as duplicate if so.
Images and texts are disappearing and switching parent ListViews like in a madhouse. :)
Anyway, we all should at least use beta for production if bugs like these are a show stopper, or revert to a working version on dev. On master I don't even bother to report bugs because that is constantly changing.
Most bugs will already be solved by the time someone reads my bug report.
Truth is that good software is hard, things always break, and complex software is a nightmare to maintain.
From my point of view, the Flutter team does a great job.
Verified that Safari will re-download image when cache header is wrong.
Although this is fine for static web pages, as soon as Flutter mutates DOM even an tag with identical src causes refresh/flicker.
A fix will be landing shortly for this to reuse img elements across frames. Thanks for patience!
@indigothm Thank you for reporting this. PR landed in engine, now waiting for engine roll into flutter, you should have the fix shortly in flutter master. @rpk98c, thx as well, we tested with your url that used to flicker in Safari, after this fix it is stable when resizing browser/image. This fix removes cross frame insert/remove DOM operations, so as a bonus you should see smoother scrolling in many apps as well.
@ferhatb What about remaining problem reported in this comment https://github.com/flutter/flutter/issues/57105#issuecomment-629777043 ? I've never seen such flickering in 1.18
This also made images disappear on listViews and gridviews on scroll
The image disappearing issue was fixed in a separate PR by @yjbanov.
any updates?
@ferhatb image disappearing was fixed, but looks like TextFormField flickering was not fixed.
@ferhatb image disappearing was fixed, but looks like TextFormField flickering was not fixed.
in which version and channel?
@Garciconx Channel master, 1.19.0-2.0.pre.83, see https://github.com/flutter/flutter/issues/57105#issuecomment-629777043
@ricardochen reproduced issue of image removal, fix landing shortly.
@Constans Do you have sample image url's that fail? I've discovered the URL can change the behaviour. My images are stored in Firebase Storage and all flicker, but if I move them to a different server the flickering completely disappears. So it could be headers or a difference in the way the image is served? Sample URL for image that flickers: https://firebasestorage.googleapis.com/v0/b/monkeysource-marmoset.appspot.com/o/theme%2Fwhitmore-park%2Fx2.0%2Fimages%2Fmenu%2Fwhitmore_park_logo.png?alt=media Sample URL for image that does not flicker: https://marmoset.digital/img/theme_whitmore-park_x2.0_images_menu_whitmore_park_logo.png?alt=media The file is the same, but headers are slightly different. Thanks, Ryan
The issue is related with firebase in my case
I fix the problem setting the metadata with
SettableMetadata(cacheControl: 'public, max-age=3600, s-maxage=3600')
when I upload the file to firebase storage.
@nicolascav Sorry but can you explain how did you do It? I am having the same problem with images only in safari. 🙆♂️
@nicolascav Sorry but can you explain how did you do It? I am having the same problem with images only in safari. 🙆♂️
Hey dude, in the dart code:
firebase.apps.single.storage() .ref('YourImagePathAndName.jpeg') .put(_imageFull, firebase.UploadMetadata( contentType: 'image/jpeg', cacheControl: 'public, max-age=3600, s-maxage=3600' ) );
Thank you it solve the problem of safari. But can you explain why i can't see the metadata in the Firebase?
I would like to know the same thing!
The only way to modify headers that I found was that.
I hope Firebase Storage will have more features.
El dom., 14 jun. 2020 a las 4:51, Francesco Vezzani (< notifications@github.com>) escribió:
Thank you it solve the problem of safari. But can you explain why i can't see the metadata in the Firebase?
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/flutter/flutter/issues/48373#issuecomment-643732171, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFPF2UISNRWBX4MO4WSW4QLRWR6PHANCNFSM4KECWMAQ .
@Constans Do you have sample image url's that fail? I've discovered the URL can change the behaviour. My images are stored in Firebase Storage and all flicker, but if I move them to a different server the flickering completely disappears. So it could be headers or a difference in the way the image is served? Sample URL for image that flickers: https://firebasestorage.googleapis.com/v0/b/monkeysource-marmoset.appspot.com/o/theme%2Fwhitmore-park%2Fx2.0%2Fimages%2Fmenu%2Fwhitmore_park_logo.png?alt=media Sample URL for image that does not flicker: https://marmoset.digital/img/theme_whitmore-park_x2.0_images_menu_whitmore_park_logo.png?alt=media The file is the same, but headers are slightly different. Thanks, Ryan
The issue is related with firebase in my case
I fix the problem setting the metadata with
SettableMetadata(cacheControl: 'public, max-age=3600, s-maxage=3600')
when I upload the file to firebase storage.
Do you know a solution if I've to download it from Firebase? I have the same problem when downloading files from fbase.
EDIT: Vi que sos de Argentina, tengo el mismo problema cuando descargo imagenes de firebase, por alguna razón cuando hago el deploy del proyecto como PWA, en iOS las imágenes parpadean. En mi caso las descargo de la siguiente manera:
return FadeInImage.assetNetwork(
image:
'https://firebasestorage.googleapis.com/v0/b/{"google.appspot.com"}/o/{"directory"}%2F${"ImagenName.jpg"}?alt=media',
placeholder: 'assets/images/loading.gif',
fadeInCurve: Curves.ease,
height: size.height * 0.40,
width: size.width * 0.85,
fit: BoxFit.fill);
@Constans Do you have sample image url's that fail? I've discovered the URL can change the behaviour. My images are stored in Firebase Storage and all flicker, but if I move them to a different server the flickering completely disappears. So it could be headers or a difference in the way the image is served? Sample URL for image that flickers: https://firebasestorage.googleapis.com/v0/b/monkeysource-marmoset.appspot.com/o/theme%2Fwhitmore-park%2Fx2.0%2Fimages%2Fmenu%2Fwhitmore_park_logo.png?alt=media Sample URL for image that does not flicker: https://marmoset.digital/img/theme_whitmore-park_x2.0_images_menu_whitmore_park_logo.png?alt=media The file is the same, but headers are slightly different. Thanks, Ryan
The issue is related with firebase in my case
I fix the problem setting the metadata with
SettableMetadata(cacheControl: 'public, max-age=3600, s-maxage=3600')
when I upload the file to firebase storage.
Do you know a solution if I've to download it from Firebase? I have the same problem when downloading files from fbase.
EDIT: Vi que sos de Argentina, tengo el mismo problema cuando descargo imagenes de firebase, por alguna razón cuando hago el deploy del proyecto como PWA, en iOS las imágenes parpadean. En mi caso las descargo de la siguiente manera:
return FadeInImage.assetNetwork( image: 'https://firebasestorage.googleapis.com/v0/b/{"google.appspot.com"}/o/{"directory"}%2F${"ImagenName.jpg"}?alt=media', placeholder: 'assets/images/loading.gif', fadeInCurve: Curves.ease, height: size.height * 0.40, width: size.width * 0.85, fit: BoxFit.fill);
You Need ti change the metadata when you upload the images. This Is the only One solution.
@Constans Do you have sample image url's that fail? I've discovered the URL can change the behaviour. My images are stored in Firebase Storage and all flicker, but if I move them to a different server the flickering completely disappears. So it could be headers or a difference in the way the image is served? Sample URL for image that flickers: https://firebasestorage.googleapis.com/v0/b/monkeysource-marmoset.appspot.com/o/theme%2Fwhitmore-park%2Fx2.0%2Fimages%2Fmenu%2Fwhitmore_park_logo.png?alt=media Sample URL for image that does not flicker: https://marmoset.digital/img/theme_whitmore-park_x2.0_images_menu_whitmore_park_logo.png?alt=media The file is the same, but headers are slightly different. Thanks, Ryan
The issue is related with firebase in my case
I fix the problem setting the metadata with
SettableMetadata(cacheControl: 'public, max-age=3600, s-maxage=3600')
when I upload the file to firebase storage.Do you know a solution if I've to download it from Firebase? I have the same problem when downloading files from fbase.
EDIT: Vi que sos de Argentina, tengo el mismo problema cuando descargo imagenes de firebase, por alguna razón cuando hago el deploy del proyecto como PWA, en iOS las imágenes parpadean. En mi caso las descargo de la siguiente manera:
return FadeInImage.assetNetwork( image: 'https://firebasestorage.googleapis.com/v0/b/{"google.appspot.com"}/o/{"directory"}%2F${"ImagenName.jpg"}?alt=media', placeholder: 'assets/images/loading.gif', fadeInCurve: Curves.ease, height: size.height * 0.40, width: size.width * 0.85, fit: BoxFit.fill);
🇦🇷❤️
I answer in English in case it is useful for someone else.
Sorry, but no. I just use the images in a PWA.
I try EVERYTHING for avoid the problem in iOS, and then, try with other image services. The only one solution that I've found, like @kekko-maker said, was sending metadata to Firebase.
@Constans Do you have sample image url's that fail? I've discovered the URL can change the behaviour. My images are stored in Firebase Storage and all flicker, but if I move them to a different server the flickering completely disappears. So it could be headers or a difference in the way the image is served? Sample URL for image that flickers: https://firebasestorage.googleapis.com/v0/b/monkeysource-marmoset.appspot.com/o/theme%2Fwhitmore-park%2Fx2.0%2Fimages%2Fmenu%2Fwhitmore_park_logo.png?alt=media Sample URL for image that does not flicker: https://marmoset.digital/img/theme_whitmore-park_x2.0_images_menu_whitmore_park_logo.png?alt=media The file is the same, but headers are slightly different. Thanks, Ryan
The issue is related with firebase in my case
I fix the problem setting the metadata with
SettableMetadata(cacheControl: 'public, max-age=3600, s-maxage=3600')
when I upload the file to firebase storage.Do you know a solution if I've to download it from Firebase? I have the same problem when downloading files from fbase.
EDIT: Vi que sos de Argentina, tengo el mismo problema cuando descargo imagenes de firebase, por alguna razón cuando hago el deploy del proyecto como PWA, en iOS las imágenes parpadean. En mi caso las descargo de la siguiente manera:
return FadeInImage.assetNetwork( image: 'https://firebasestorage.googleapis.com/v0/b/{"google.appspot.com"}/o/{"directory"}%2F${"ImagenName.jpg"}?alt=media', placeholder: 'assets/images/loading.gif', fadeInCurve: Curves.ease, height: size.height * 0.40, width: size.width * 0.85, fit: BoxFit.fill);
🇦🇷❤️
I answer in English in case it is useful for someone else.
Sorry, but no. I just use the images in a PWA.
I try EVERYTHING for avoid the problem in iOS, and then, try with other image services. The only one solution that I've found, like @kekko-maker said, was sending metadata to Firebase.
Hi,
Thanks for all for the support. The issue seems mainly resolved but I can still replicate in a specific scenario even with correct cache headers.
Create a PWA and add to home screen on an iOS device, iPad tested. The image flickers are back on hero animations and certain scrolling. If I remove the service worker fetch code then the flicker goes too, but with the default flutter_service_worker and an app added to home screen then I see the flicker.
At a stab in the dark, it feels like the service worker is causing a cached image fetch to be aysnc and causing the flicker on request.
Thanks
Ryan
Problem persists on beta channel, images start flickering when in column inside singleChildScrollView when i start scrolling up and down, both images from assets and network
Steps to Reproduce
The website: https://velmio-web.web.app Each image is loaded from firebase using Image.network and a direct URL.
So when the page loads and the images load scrolling the page seems to reset the images. This doesn't happen in Chrome or Firefox.
Target Platform: Web Target OS version/browser: Safari 13 Devices: MacBook Pro
Logs