Cloudflare images displaying as green rectangles in OpenSeadragon viewer on Brave mobile browser

[amy.bowen]

I’m running into an issue where images (hosted in Cloudflare images) are displaying in a solid green color. For example, on this page: https://staging.ephemerasearch.com/ephemera/207/?img=2

The dimensions of the green image match those of the corresponding image.

I’ve only been able to reproduce this issue with this combination of factors when:

• the image is displayed in the OpenSeadragon.js viewer
• viewed in Brave browser (both normal and private tabs)
• viewed on mobile (including when viewing the desktop version)
• images are hosted on Cloudflare images

So far, I’ve tested on the following devices:

• Pixel 3
• Pixel 4XL
• OnePlus 5
• Samsung Galaxy S10e

Further observations:

• At the above URL, the image is displayed in the OpenSeadragon.js viewer. The same image displays correctly when embedded with a normal <img src="..."> like on this page: https://staging.ephemerasearch.com/images/382/.
• The exact same images displayed correctly before I migrated to Cloudflare images (from Cloudinary).
• I have NOT been able to reproduce the problem on Chrome or Firefox Focus, or on any desktop browser.

What could be causing this?

[cloonan]

Are you still encountering this @amy.bowen? If so, you could try going to speed → optimization and disable polish then clear your browser cache and visit the site again.

[amy.bowen]

Hey @cloonan thanks for your reply.

@cloonan

Are you still encountering this @amy.bowen?

Yes, I first noticed it after migrating to Cloudflare images a few months ago and it’s still happening.

@cloonan

If so, you could try going to speed → optimization and disable polish then clear your browser cache and visit the site again.

I disabled polish, cleared the cache and cookies for the site and also tried in a Brave private window on several pages I’ve not visited from this phone before, but I’m still only seeing the solid green images, unfortunately.

Any other ideas/suggestions would be very welcome – happy to provide any additional details.

[cloonan]

Thank you.

I can see the error in brave, opera is having an issue loading the staged page, and I am able to reproduce this in chrome. There is a discussion in the brave forum about a similar issue being caused by hardware acceleration, that does not appear to be the case here.

A long work around would be to use a mobile redirect and serve the images from another source. Let us know how it goes, this is perplexing.

Understanding Cloudflare Mobile Redirect · Cloudflare Support docs

[amy.bowen]

@cloonan

I can see the error in brave

I’d be curious to know what error you see. I can’t reproduce on Brave on desktop, and I don’t even know where I would look to see errors in Brave on mobile. (I did try recording a trace, but I couldn’t find anything in it that seemed obviously related to the issue.)
Or do you just mean you see the green image?

@cloonan

and I am able to reproduce this in chrome

I haven’t been able to reproduce in Chrome at all. Was this a typo? If not, that seems bad

@cloonan

A long work around would be to use a mobile redirect and serve the images from another source. Let us know how it goes, this is perplexing.

I’m not sure what you mean. Do you mean another source besides Cloudflare Images?

[asemiglazov]

Hi, do you know what image codec is misbehaving? is it AVIF?

[amy.bowen]

Would you have suggestions on how to tell? I can’t see a way to inspect the image inside the viewer, especially in Brave on mobile…

[yevgen]

I’m convinced this is an issue with OpenSeadragon.js viewer compatiblity with AVIF format on mobile devices. I’ve tested OpenSeadragon.js viewer on desktop and it works fine with AVIF images. We can disable serving images in AVIF format on your account. Let me know if you want to see this change.