I'm testing a website in production on Iphone and this morning the .png images of our team members started appearing with a green background (no CSS or anything applied). I am using Cloudinary CDN for image hosting and serving.
The original images don't have this background and show up correctly on every android device and desktop browser I have tested.
Here is a screenshot:
Do you have any idea what is causing this?
I am using the Cloudinary React SDK to render these images:
import { Image } from "cloudinary-react";
export default class CDNI extends React.Component {
render() {
return (
<Image
dpr="auto"
responsive
crop="fit"
quality="auto"
fetch_format="auto"
{...this.props}
>
{this.props.children}
</Image>
);
}
}
This doesn't seem to be a code issue however, I can only reproduce it in an Iphone (have tested in Windows, OSX and multiple Android devices).
Thanks in advance.