Images only partially loaded / cutoff / cropped

[Carl Ambroselli]

For large image files (i.e. mine are >3000px per dimension), the fullscreen view can sometimes only load a part of the image and then cut it off on mobile Safari. Waiting does not solve this, back and forth also doesn't solve it, only the workarounds listed below. This does not happen for all images, but it happens esp. frequent for large images.

Screenshot (I cut off the bottom of the thumbnails since these are private photos, only the main image is cropped):

• When I open devtools and change the height of the image to 100% and then change it back, the correct image size is shown
• When I zoom in (i.e. by double-tapping) and then zoom out again, the issue is gone
• When setting data-ngimagewidth / data-ngimageheight, this does not resolve the issue (the css height/width are set correctly, but the browser still renders it incorrectly)
• When making the images interlaced, the issue is gone as well

Bonus, converting all your .jpg images in a folder to an interlaced version (that's what I've used):
for i in $(ls *.jpg); do docker run --entrypoint=convert --rm -v $(pwd):/img dpokidov/imagemagick /img/$i -interlace Plane /img/interlaced/$i; done

I've attempted something like the following, but it creates an ugly flicker (when switching to 100% height for 50ms) and only works in 90% of the cases:

  <script>
    let fixed = []
    window.setInterval(() => {
      pic = document.querySelector('.nGY2ViewerMediaPan.imgCurrent > .nGY2ViewerMedia')
      if (pic && fixed.indexOf(pic.src) === -1) {
        fixed.push(pic.src)
        $(pic).on('load', function() { 
              let current = document.querySelector('.nGY2ViewerMediaPan.imgCurrent > .nGY2ViewerMedia')
              fixed.push(current.src)
              current.style.height = "100%"
              let handle = current
              window.setTimeout(() => {
                handle.style.height = (handle.naturalHeight / handle.naturalWidth) * handle.width + "px"
              }, 50)
            })
          }
    }, 200)
  </script>