Images presented in original resolution instead of scaling to fit reader screen when using Image Splitting in reading profile

What happened?

Kavita-Split-Scaling-Test-1-4x.zip

When using Image Splitting to present a double-spread image as two separate images in the reader, the first half will sometimes render at its original resolution rather than being scaled to fit the reader. This can result in the image appearing either too small or too large for the reader view. Moving forward and backward one page (or backward and forward) to force the image to refresh causes the scaling to be applied correctly. More rarely, the first split image does not render at all and the reader displays a black screen until the page is refreshed.

The behavior seems to vary between comic files. I have some chapter archives containing double spreads that always render the first half without scaling, some that behave inconsistently, and some that always scale correctly on the first render. The latter may be because the resulting split image is already close to the reader's display resolution.

My hypothesis is that there may be a race condition between the image-splitting routine and the image-scaling routine.

To test this, I created a set of test chapter archives using test patterns at multiples of the resolution of a double spread from a comic archive that consistently fails on first render: 1/4×, 1/2×, 1×, 2×, and 4×. These test archives sometimes scale correctly on first render, but I have also found a procedure that consistently produces a mis-scaled split image. I have attached the test CBZ archives to this bug report.

1. Add the test chapter archives to a test library:

   • Create a test library folder and series folder in Kavita's data directory: mkdir -p "split test/test"
   • Add the test CBZs to the split test/test directory.

2. Create a reading profile:

   • Go to Settings > Account > Reading Profiles.
   • Select + Add.
   • Name the profile Split Test.
   • Change Page Splitting to Split Left to Right (or Split Right to Left).
   • Leave all other settings at their defaults.

3. Create the test library:

   • Go to Settings > Server > Libraries.
   • Select + Add Library.
   • Name the library Split Test.
   • Select Next.
   • Add the split test folder from the Kavita data directory.
   • Save the library, leaving all other settings at their defaults.

4. Apply the split-image reading profile:

   • From the Kavita home screen, open the context menu for the Split Test library.
   • Select Reading Profiles > Set Reading Profile.
   • Select Split Test.
   • Confirm.

5. Start reading the Kavita Image Splitting Scaling Tests series:

   • Open the series.
   • Select Read.
   • The first image in each test chapter is a single-page portrait test pattern. The second image is a double-spread test pattern.
   • Page right from the first page to render the first half of the double spread.
   • When scaling is not applied, the first half of the image will appear either too large or too small for the reader view.
   • Page left and then right again to refresh the image. The scaling will then be applied correctly.
   • The scaling issue generally does not occur again for that particular image until the chapter is closed and reopened, although this is somewhat inconsistent. I suspect this may be related to image caching.

For me, only the 1/4× test pattern consistently fails to scale when starting from a fresh read. It renders as an image that occupies only a small portion of the reader view. Interestingly, the 1× test pattern does not consistently reproduce the issue even though its resolution was derived from a comic archive that consistently fails in normal use.

However, I can consistently reproduce the issue with all five test archives by opening a chapter directly on the double-spread page:

1. Ensure each test chapter has already been read:

   • Go to the Kavita Image Splitting Scaling Tests series page.
   • Open the series context menu.
   • Select Mark as Read > Mark as Read.

2. Open a chapter starting at the double-spread page:

   • Select the Read button on any chapter.
   • In the Re-Read prompt, select Pick up where you left off.

The first half of the double-spread image will then be displayed without the expected scaling applied. In some cases, the image does not render at all and the reader remains black until paging left and right to force a refresh.

This occurs consistently for all five test chapters.

I have tested this on iOS Safari, Mac OS Safari, Chrome and Firefox and Windows Chrome and Firefox with all showing the inconsistent scaling of split images.

What did you expect?

Images should always apply scaling settings when being rendered.

Kavita Version Number - If you don't see your version number listed, please update Kavita and see if your issue still persists.

0.9.1 - Stable

Are you accessing kavita through a reverse proxy? If yes, confirm that the issue persists with a direct connection

Yes

What operating system is Kavita being hosted from?

Docker (LSIO Container)

If the issue is being seen on Desktop, what OS are you running where you see the issue?

None

If the issue is being seen in the UI, what browsers are you seeing the problem on?

Firefox, Chrome, Safari

If the issue is being seen on Mobile, what OS are you running where you see the issue?

iOS

If the issue is being seen on the Mobile UI, what browsers are you seeing the problem on?

Safari

Relevant log output

Additional Notes

No response