Black images on iOS

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"
      },

It’s strange that we request the WebP format, but the response is AVIF :hushed:

Flexible format doesn’t support format option now:

format is only supported in image-resizing product.

Instead, you can remove image/avif from request’s Accept header.

1 Like

@asemiglazov thanks for a quick response.
I’m not sure we can remove image/avif from Accept Header on our side. We use Next.js image component. This is from the docs:

Note: If you self-host with a Proxy/CDN in front of Next.js, you must configure the Proxy to forward the Accept header.

Based on our investigation, only iOS 16 is affected. Next version was patched by Apple and the bug was removed, but it’s still a big chunk of our users.

Thanks!

This topic was automatically closed after 15 days. New replies are no longer allowed.