iOS - Safari - images not rendering fully / cut off

Question

We are loading images in a popup, via an Ajax request, and they intermittently only partially render.

I've basically removed any weird Javascript/nonsense other than the core flow - just a basic HTML image, and it is still happening - only on iOS.

Once you 'rotate' the device, the image renders correctly - so, it's not a weird div floating above or anything (I can select the image in iOS debugger mode when attached to a Mac)

Any help would be most appreciated.

Answer 1

It seems this is an issue within the iOS image decoder - some kind of race condition.

This has been fixed by forcing the decoder to operate on the main thread, using:

<img decoding="sync" src="@Url" />

Hopefully this helps someone else!

Answer 2

In my case, the solution was to decrease the size of the images I was displaying. Our images were about 10x the size of the HTML element they were displayed in.

Apple's developer document states:

Answer 3

Setting decoding="sync" on the img tag didn't help in my case where a lot of images are loaded simultaneously. Loading the image manually before did the trick though.

      const imageLoader = new Image();
      imageLoader.src = url;
      imageLoader.decoding = 'sync';
      imageLoader.onload = () => {
        // allow drawing image
      };

For anyone who stumbles across this and is working in a react environment

const [didLoadMainImage, setDidLoadMainImage] = useState(false);
useMemo(() => {
  setDidLoadMainImage(false);
  const imageLoader = new Image();
  imageLoader.src = url;
  imageLoader.decoding = 'sync';
  imageLoader.onload = () => {
    setDidLoadMainImage(true);
  };
}, [url]);

return (
  <div>
   {didLoadMainImage ? (
     <img src={url} />
   ) : null}
  </div>
);