Why does Safari only render the top of images sometimes?

user_6334698 0
Viewed 1142

I work for a media company in Norway, and on rare occasion we see that an image will fail to render in its entirety. When this happens, we can refresh the page and the image will still only partially render. We have only ever seen this happen on Safari, and I have been able to reproduce it both on desktop (Safari 13.1.2) and mobile (iOS 14.4.1).

In the network tab, the image seems to have been fully delivered. The amount of bytes transferred is the expected amount. In fact, if we increment the height of the container by 1px, the image will suddenly appear in full, with no network activity occurring. In other words, the browser did receive the full image, it just is not showing.

partial image load

Everything in the styling looks totally normal, but we still assumed this was somehow related to the CSS. However, we created a local override, and we were still able to reproduce with the following code:

<figure class="desktopi-45000 mobilei-45000 tableti-45000">
    <picture>
        <img itemprop="image" data-defer="view" sizes="(max-width: 640px) 640px,(max-width: 1024px) 1024px,1240px" title="- Du hører ikke hjemme her!" alt="- Du hører ikke hjemme her!" class="" srcset="https://www.dagbladet.no/images/73594916.jpg?imageId=73594916&x=15.742793791574&y=14.099216710183&cropw=72.431633407243&croph=57.57180156658&width=760&height=342&compression=70 640w,https://www.dagbladet.no/images/73594916.jpg?imageId=73594916&x=15.742793791574&y=14.099216710183&cropw=72.431633407243&croph=57.57180156658&width=900&height=405&compression=80 1024w,https://www.dagbladet.no/images/73594916.jpg?imageId=73594916&x=15.742793791574&y=14.099216710183&cropw=72.431633407243&croph=57.57180156658&width=980&height=441&compression=80 1240w" src="https://www.dagbladet.no/images/73594916.jpg?imageId=73594916&x=15.742793791574&y=14.099216710183&cropw=72.431633407243&croph=57.57180156658&width=380&height=171">
    </picture>
</figure>

Here is an image comparison of what we see when the issue occurs. Note that it can take many, many tries before the bug occurs.

comparison of isolated partial image load

While trying to figure this out, we came across a similar question. However, the answers provided fail to elaborate on the root cause of the problem. One of the answers says to use decoding="sync", and that does seem to resolve the problem (at the very least, we cannot reproduce with that added). However, that is not a viable solution due to the performance impact it has. Given the other sites are not experiencing this problem and do not use decoding="sync", there is something else going on. The question, therefore, is why is this happening? What is causing this, and what can be done to resolve it?

safari css image html
3 Answers

When testing locally, this could seem to be fixed by adding either

decoding="async"

or

decoding="sync"

to the image-tag. For some reason, Safari and browsers running on Apple-products seem to struggle with automatically choosing the best suitable way of decoding images to render.

user_42664670

The most upvoted answer on the question you've come across does actually clarify it a bit. But for a bit more explanation, there the actual Mozilla WebDeveloper explanation here, and according to the second answer, iOS has a bit of a soft-limit when it comes to loading things in, and lower priority things (like something loaded asynchronously) are given less memory.
By using decoding="sync" on an <img> tag you are specifying that it should be loaded synchronously, things loaded synchronously tend to be of a higher priority and therefore have a bit more memory to work with. You could opt to lower the resolution of the image in order to not have to rely on synchronous loading to allow a higher memory usage when loading the images in.
As far as I can tell, this is, in fact, a known iOS/MacOS issue, but I cannot find any mention of work being made towards it. So synchronous loading or differing image sources (with different resolutions) or possibly even some modern implementation of iframe-style tech (like what's used on JSPs, or any kind of nesting like what can be found in Angular) can serve as ways to alieviate this issue, but it seems like something that Apple will have to solve in order for it to undoubtedly cause problems.

I may be wrong about this, since I am not an Apple Technician, but innate browser issues cannot be solved through Web Programming alone. I apologize for putting all this in an answer, but comments have a bit of a character limit and links count towards it.

user_154525720

in the developer tools, I noticed that if you change something in css, the picture is displayed completely... it became a solution for me: after the picture was uploaded, using js I added css which will not affect the image on the page like (z-index) or what ever, but thanks to this, the picture began to be fully displayed

user_170315600
Related