Black Images on IOS until clicked

Developers Images
1

For Workers & Pages, what is the name of the domain?

Not sure what this is - Sorry i am new

What is the issue or error you’re encountering

When i open my app to view images i uploaded to Cloudflare images, on my IOS Iphone the images are all black unless i click into them. But on my Macbook laptop it loads fine.

What steps have you taken to resolve the issue?

I’ve created custom rule to avoid AVIF (as i read that AVIF may be causing issues) but even after that and purging cache my iphone still loads black images instead of the original. Once clicking the image it triggers the fix. Please help …

What are the steps to reproduce the issue?

open site on IOS - not sure if i should show my site here for confidentiality. Screenshot 2025-04-18 at 2.47.52 AM.png

2

The screenshot did not upload. Can you try again and/or share the domain name? Are you using the same browser on desktop and mobile? Same network or mobile and home internet based on device?

3

Sure here is the image.

Screenshot 2025-04-18 at 9.39.58 AM
Screenshot 2025-04-18 at 9.39.58 AM360×268 9.31 KB

Btw as well, i think for some reason my defined custom rules are not taking effect?

For example this image : https://imagedelivery.net/0mSqwSU3l4CCPbvnXxAIog/f80c8fec-ca48-45de-ce1a-a0f9c6bf5e00/public?v=1

The network of it shows

accept-ranges:

bytes

access-control-allow-origin:

*

alt-svc:

h3=":443"; ma=86400

cache-control:

public,max-age=172800,stale-while-revalidate=7200

cf-bgj:

imgq:85,h2pri

cf-cache-status:

HIT

cf-images:

internal=ok/- q=0 n=1721+740 c=130+410 v=2025.4.0 l=78582 f=false c2=0

cf-ray:

932064ec9cde04dc-HKG

content-length:

78582

content-security-policy:

default-src 'none'; navigate-to 'none'; form-action 'none'

content-type:

image/avif

date:

Fri, 18 Apr 2025 01:29:58 GMT

etag:

"cfowGUaYeVlOnUwktGn4Iqr8NCfb7C9F9CBQfA5-d8DQ"

priority:

u=0,i

server:

cloudflare

server-timing:

cfExtPri

vary:

Accept, Accept-Encoding

x-content-type-options:

nosniff

Still giving AVIF. I’ve followed this to set the rule to only allow webp Vary for images · Cloudflare Cache (CDN) docs .

when I get the rule via terminal i can see this

{
  "result": {
    "editable": true,
    "id": "variants",
    "modified_on": "2025-04-17T18:35:28.257659Z",
    "value": {
      "jpeg": [
        "image/webp"
      ],
      "jpg": [
        "image/webp"
      ]
    }
  },
  "success": true,
  "errors": [],
  "messages": []
}

Is the variant ID meant to be the name of the variant? Mine is called public/ in this case

4

Sorry to answer your question. I have tried safari and chrome on my iphone IOS 16 and all show this issue. The macbook works on safari and chrome. Also yes it is the same network for both devices though I’ve shared it to my friends to try and newer iphones did not have this issue.

I suspect the issue i cloudflare is sending avif images to my IOS16 which i think does not support them? Thank you !!

5

That seems correct based on this thread with a proposed workaround Black images on iOS

6

Thanks for reply but then is there a fix to this please? i switched to cloudflare for faster images but this issue affects quite abit of my users, is there a current known fix or can the cloudflare team help out? thanks!

7

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.

8

Hey there!

If this is indeed the safari avif issue, this should now be resolved.