Blurry Comic/Manga on iOS and iPadOS

[darthtechworker]

When opening a comic or a manga in the Kavita reader:

• The first page loaded (not necessarily the first comic book page, just the one you see when you open a comic/manga each time) is tack sharp and pixel perfect resolution.
• However, when you switch to next page, it is blurry and not sharp at all.
• This adds eye strain while reading comics and mangas.

Consistently reproducible in the following environment: 1) iPad Pro 11" (4th gen), iPad Pro 12.9" (6th gen), iPhone 14 Pro Max, iPad Mini 6 2) Safari in all the above devices. 3) Chrome in all the above devices. 4) Both in portrait and landscape mode. 5) Settings screenshot attached below. (Reading Mode: Left to Right) 6) Kavita 0.7.8.0 running on docker inside Synology.

Additional Context: If you zoom into the image and zoom out again, the text and the images become sharp again.

Does not happen when: 1) Streaming in 3rd party apps such as Panels through OPDS using Kavita 2) Viewing comic using Safari in Desktop (MacOS).

Screenshots:

• Settings screenshot:

  

• First Page (Tack Sharp) <------->Second & Subsequent Pages (Not so sharp/blurry)

  

[therobbiedavis]

@gauravpandeydotdev Would you be able to tell me the format of these images? I think this might be a limitation of iOS itself.

In Safari on iOS, there is a known limitation when displaying large PNG and GIF images. The issue is triggered by the overall number of pixels in the image, so even if an image is narrow, you can experience blurriness if the image is tall enough.

This affects both the iPad and iPhone and affects all models of device. However, the exact image size that triggers the issue varies from iPhone to iPad and between models. For example, if you’re creating an image for iPhone 6 Plus that is 1080px wide, then the image can be up to ~4800px tall before blurriness would occur.

If you use JPG instead of PNG or GIF, then you may see less blurriness since the limit is increased for JPG images. For PNG or GIF images, however, the only way to work around this issue currently is to reduce the dimensions of the image until they’re below the limit that causes the issue.

I will still look into this because that doesn't explain why the first image isn't blurry though.

[darthtechworker]

Thanks for following up, however I am not using Kavita anymore, so I will not be able to provide an answer.