avif images don't display correctly on react web pages after refresh
Categories
(Firefox :: Untriaged, defect)
Tracking
()
People
(Reporter: quackackjac, Unassigned)
Details
Attachments
(1 file)
|
2.63 MB,
application/x-zip-compressed
|
Details |
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:84.0) Gecko/20100101 Firefox/84.0
Steps to reproduce:
Load quackack (https://quackack.com/54).
Refresh the page (with F5 or the refresh button. NOT ctrl+F5!)
Refresh page with control F5.
Load the avif image directly (go to https://quackack.com/data/comics/images/54.avif)
Reload image with control F5
Actual results:
On the first loading, the comic is displayed on the website.
On refresh it loads for about a minute without displaying any image data, then displays alternate text without image.
On cache clearing refresh (Control F5), displays comic on website.
When loading the image directly, we get the error
"The site at https://quackack.com/data/comics/images/54.avif has experienced a network protocol violation that cannot be repaired."
In console, we get the errors
"Failed to load ‘https://quackack.com/data/comics/images/54.avif’. A ServiceWorker passed a promise to FetchEvent.respondWith() that rejected with ‘TypeError: client is undefined’."
and
"No strings exist for error: corruptedContentErrorv2-title"
When refreshed with control F5, loads the image with no errors.
Expected results:
It should load the comic both times.
Extra Information:
Where does this occur:
This happens on my windows 10 laptop, in both Firefox and Chrome. This does NOT happen on my smartphone in chrome (where presumably it is falling back to JPEG), or in older versions of chrome or firefox before avif support.
What is the website:
It is a react single page web app hosted directly on S3 with no server.
How is the HTML constructed:
Programmatically through javascript and react. A json containing comic information is loaded from S3, which is used to select the comic. The comic is then put in HTML through a react element.
Running React Locally:
When I run the code locally through "npm start" (repo sans comics at https://github.com/quackack/quackack-comics), it works, reloading comics correctly and finding them in the cache.
The more I look at this, the more I suspect that React is doing something stupid with service workers than I think it is an error with Firefox. However, I'm not sure how to fix it.
|
Reporter | |
Comment 1•4 years ago
|
||
I solved it.
Back WAY back in December 2019, I tried to get avif support in my web browser (https://stackoverflow.com/questions/59433854/how-do-i-use-avif-images-in-react-single-page-web-app) using (https://github.com/Kagami/avif.js). When doing this, I used a service worker to add this feature. But ultimately due to issues with mobile, I rolled back this feature. But I never completely eliminated the service workers. I remember I tried, but couldn't find the page to do this!
Old service workers cached in my browser seem to be what was causing the issue. Upon removing them from, things seem to work now.
Just goes to show the problems with only testing on one machine. Sorry for any wasted time.
Description
•