Hi! We have a several user reporting that their images are black on iOS. I believe it was already reported here (Images on iOS mobile are showing as Black for around 10 seconds - #8).
Do you have any ideas why that might be the case? Thanks!
This is a Network Log for one of the broken images:
"{
"pageref": "page_0",
"startedDateTime": "2023-05-30T21:37:06.511Z",
"time": 64.38146741129458,
"request": {
"method": "GET",
"url": "https://imagedelivery.net/denlYHVO222xtJr2VtBBrg/6f68bcc0-b488-4128-15c9-e9caca8a2a00/width=400,quality=80,metadata=none,fit=cover,format=webp,background=transparent",
"httpVersion": "HTTP/2",
"cookies": [],
"headers": [
{
"name": "Accept",
"value": "image/webp,image/avif,video/*;q=0.8,image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5"
},
{
"name": "Accept-Encoding",
"value": "gzip, deflate, br"
},
{
"name": "Host",
"value": "imagedelivery.net"
},
{
"name": "User-Agent",
"value": "Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1"
},
{
"name": "Accept-Language",
"value": "en-US,en;q=0.9"
},
{
"name": "Referer",
"value": "https://www.shelf.im/"
},
{
"name": "Connection",
"value": "keep-alive"
}
],
"queryString": [],
"headersSize": 125,
"bodySize": 0
},
"response": {
"status": 200,
"statusText": "",
"httpVersion": "HTTP/2",
"cookies": [],
"headers": [
{
"name": "Content-Type",
"value": "image/avif"
},
{
"name": "Access-Control-Allow-Origin",
"value": "*"
},
{
"name": "Vary",
"value": "Accept, Accept-Encoding"
},
{
"name": "Content-Security-Policy",
"value": "default-src 'none'; navigate-to 'none'; form-action 'none'"
},
{
"name": "Accept-Ranges",
"value": "bytes"
},
{
"name": "Cache-Control",
"value": "public,max-age=172800,stale-while-revalidate=7200"
},
{
"name": "Date",
"value": "Tue, 30 May 2023 21:37:06 GMT"
},
{
"name": "Content-Length",
"value": "43907"
},
{
"name": "X-Content-Type-Options",
"value": "nosniff"
},
{
"name": "ETag",
"value": "\"cfE23eRZ9ir7JODGd-aEESefPnTFGymrIwfmPGEdjIDQ\""
},
{
"name": "Alt-Svc",
"value": "h3=\":443\"; ma=86400"
},
{
"name": "Server",
"value": "cloudflare"
},
{
"name": "cf-cache-status",
"value": "HIT"
},
{
"name": "warning",
"value": "cf-images 299 \"cover fit mode needs both width and height\""
},
{
"name": "cf-bgj",
"value": "imgq:85,h2pri"
},
{
"name": "cf-ray",
"value": "7cfa1dcfdff2437e-EWR"
},
{
"name": "cf-images",
"value": "internal=ok/- q=0 n=265+0 c=0+0 v=2023.4.2 l=43907"
}
],
"content": {
"size": 43907,
"compression": -63,
"mimeType": "image/avif",
"text": "correct base 64 of the image here, removed for clarity",
"encoding": "base64"
},
"redirectURL": "",
"headersSize": 67,
"bodySize": 43970,
"_transferSize": 44037
},
"cache": {},
"timings": {
"blocked": 1.3265768066048622,
"dns": -1,
"connect": -1,
"ssl": -1,
"send": 0,
"wait": 53.93604631535709,
"receive": 9.118844289332628
},
"serverIPAddress": "2606:4700::6812:324",
"_serverPort": 443,
"connection": "3",
"_fetchType": "Network Load",
"_priority": "low"
},
"
This is example of the working image on the same device
{
"pageref": "page_0",
"startedDateTime": "2023-05-30T21:37:05.981Z",
"time": 0.04575005732476711,
"request": {
"method": "GET",
"url": "https://imagedelivery.net/denlYHVO222xtJr2VtBBrg/4b73c221-fe97-4c9a-5446-e766c9a62c00/width=400,quality=80,metadata=none,format=webp",
"httpVersion": "",
"cookies": [],
"headers": [],
"queryString": [],
"headersSize": -1,
"bodySize": -1
},
"response": {
"status": 200,
"statusText": "",
"httpVersion": "",
"cookies": [],
"headers": [
{
"name": "Content-Type",
"value": "image/avif"
},
{
"name": "Access-Control-Allow-Origin",
"value": "*"
},
{
"name": "Vary",
"value": "Accept, Accept-Encoding"
},
{
"name": "Content-Security-Policy",
"value": "default-src 'none'; navigate-to 'none'; form-action 'none'"
},
{
"name": "Accept-Ranges",
"value": "bytes"
},
{
"name": "Cache-Control",
"value": "public,max-age=172800,stale-while-revalidate=7200"
},
{
"name": "Date",
"value": "Tue, 30 May 2023 21:31:19 GMT"
},
{
"name": "Content-Length",
"value": "32298"
},
{
"name": "X-Content-Type-Options",
"value": "nosniff"
},
{
"name": "ETag",
"value": "\"cfAPHkT9kweLocyqpW8H8Dd07Qi__cZycvSNdFS7UCDQ\""
}
],
"content": {
"size": 0,
"compression": 0,
"mimeType": "image/avif",
"text": "correct base 64 of the image here, removed for clarity",
"encoding": "base64"
},
"redirectURL": "",
"headersSize": -1,
"bodySize": -1
},
"cache": {},
"timings": {
"blocked": 0,
"dns": -1,
"connect": -1,
"ssl": -1,
"send": 0,
"wait": 0.035541714169085026,
"receive": 0.010208343155682087
},
"_fetchType": "Memory Cache"
},