Safari broken images and Image Resizer

[dustinp26]

I'm submitting a

[x] bug report => search github for a similar issue before submitting

...about

[x] Razor templating

Current Behavior / Expected Behavior

Safari will break the image if you are resizing it down a certain amount. It is not always the same and don't know what exactly causes it as some images will render fine and others not.

For instance, this image on the 2sxc blog when sized down to 100px wide breaks:
https://2sxc.org/portals/0/adam/blog%20app/rbvwi4qakukfunyjedfo4g/image/towelday%202sxc.jpg?mode=max&scale=both&quality=60&w=100

yet this works at 300px wide:
https://2sxc.org/portals/0/adam/blog%20app/rbvwi4qakukfunyjedfo4g/image/towelday%202sxc.jpg?mode=max&scale=both&quality=60&w=300

Ironically after discovering this, the 2sxc blog seemed to add the format=webp and those seem to work fine.

So this works: https://2sxc.org/portals/0/adam/blog%20app/rbvwi4qakukfunyjedfo4g/image/towelday%202sxc.jpg?mode=max&scale=both&format=webp&quality=60&w=100

Image would show in Safari

Not sure how or if this applies to 2sxc or more a Safari / imazen issue but figured i would report it.

Your environment

• 2sxc version(s): 16.01
• Browser: iOS XX Safari
• DNN: all
• Hosting platform: all
• Language: any/all

[iJungleboy]

@dustinp26
Could you provide some Safari screenshots as to how it breaks?

If you know your F12 debug, then some infos regarding what URLs are being called which then fail would also be helpful.

[dustinp26]

Those image url's I pasted in the original issue still present the issue and are what is being called. Not sure if you have Safari available to you but here is a loom video showing what occurs:

https://www.loom.com/share/69062dbb8a1b408baf6d691c139131cd?sid=028c2d55-b26d-4e5c-acc1-5567b5e6ffa9

[iJungleboy]

Thanks for the video! this is very strange and I'm not even sure how we could escalate this to ImageFlow (the makers of this).

Could you try a few more things?

1. Please use slightly more exotic values such as 105, just to be sure that this size hasn't been pre-generated and could be retrieved from some cache
2. See what is downloaded on the network tab - to find out if the backend returns an error, or if a real file is created but can't be shown
3. Try to get this image using another browser - save to the PC, and open that. Because if the saved file also fails, this would be much easier to give to ImageFlow to help them find out the cause. If that works, pls upload it to this thread.

[iJungleboy]

in 16.02/16.03 we updated the image-resizer.

Could you check if this is still the case?

[dustinp26]

Per your list above, # 3 which i mention at bottom of this response is where i might have something to help or perhaps this is what you already discovered and maybe fixed in 16.03/.03.

1 and 2 above I mention too in case there is anything you see that helps.

If the blog on 2sxc.org is now running the 16.02/.03 then yes it is still an issue, otherwise I need to get one of those versions installed to test and Ill report back then.

per your suggestions above:

1. Done that and still an issue re
2. 2sxc.org this is the response header I am getting the network tab and still with a missing image icon in the network tab but don't see any errors.

4.10 KB
4.15 KB
0
176ms
Summary
URL: https://2sxc.org/portals/0/adam/blog%20app/rbvwi4qakukfunyjedfo4g/image/towelday%202sxc.jpg?mode=max&scale=both&quality=60&w=200
Status: 200
Source: Network

Request
:method: GET
:scheme: https
:authority: 2sxc.org
:path: /portals/0/adam/blog%20app/rbvwi4qakukfunyjedfo4g/image/towelday%202sxc.jpg?mode=max&scale=both&quality=60&w=200
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Cookie: dnn_IsMobile=False; _ga=GA1.2.840219142.1692812722; _ga_0LRN7BXQ85=GS1.2.1692812722.1.0.1692812722.0.0.0; _gid=GA1.2.1263294348.1692812722; .ASPXANONYMOUS=nFc4c6QlggaKww3TtUTutCFkUuW0GdvGknYQOrO45_hpLtHS0-VGWIBljXmyA2zRnUzZbGlfgZuKPmOM_ADBQRnFz6gysFuGAfp8xzbN4X_8mLL70; __RequestVerificationToken=q0Sa9L1M75tPzGWvDfT8CY2bsrM6Y-gSJdQWLfggeGfPaCUx0Ez_PE_YKF3O9aeIo0Q82g2; language=en-US
Host: 2sxc.org
Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: none
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Safari/605.1.15

Response
:status: 200
Cache-Control: max-age=2592000
Content-Type: image/jpeg
Date: Wed, 23 Aug 2023 18:04:46 GMT
ETag: _E8IYmyHatJj96YfbnbdTqSJKCkRs8am_nUS2xFPmzs
Server: Microsoft-IIS/10.0

Query String Parameters
mode: max
scale: both
quality: 60
w: 200

#3 - I think you have something here. If I pull up in firefox or chrome, download the image, it then will give me error as broken file but oddly I CAN open it up in chrome or firefox fine but not other programs for images like photoshop or preview.

Here is the downloaded image

[iJungleboy]

Just for understanding: the image on this page (when looking at this page in safari) also fails?

Just to verify that we should be able to reproduce the problem just looking at this page...

[dustinp26]

Yes, here is a screenshot of it in safari.

1. I went to https://2sxc.org/portals/0/adam/blog%20app/rbvwi4qakukfunyjedfo4g/image/towelday%202sxc.jpg?mode=max&scale=both&quality=60&w=200 in Safari and the image was broken.
2. That same url but if you change it to say https://2sxc.org/portals/0/adam/blog%20app/rbvwi4qakukfunyjedfo4g/image/towelday%202sxc.jpg?mode=max&scale=both&quality=60&w=392 will work in safari
3. The image from # 1 above - I went to firefox where the image will render without error and then saved the image to my desktop
4. I tried opening the saved image to on my desktop and it returns this error:
   
5. I uploaded the image I downloaded from firefox that is broken in safari and uploaded to the previous comment (first screenshot in this post) and it works in Firefox / Chrome but not safari. Obviously my computers sees it as a damaged file yet it renders in Chrome and Firefox.

If I download image in 2 above it will not be a damaged image when saved to my computer and opens. The files size is 8kb vs 4kb if there is any relation to when an image gets to be too small in file size it breaks in safari (wild guess only).

To further provide info - this image in safari works when width is sized down to 254 but begins to break at 253. Now this varies from image to image so it is not always a set width that breaks it for each image.

Lastly, info from each image download from firefox that renders but two of them don't in safari and both of those end up broken images when downloaded. Notes the Bytes one says is 8kb on disk (the one that works) but the other two say 4kb but yet the bytes are just under 4100. Also notice the "Where from" under more info on the two broken ones - don''t know why the (2) gets added to this URL at the end as that is.

[iJungleboy]

Reported to ImageFlow here: https://github.com/imazen/imageflow/issues/635