EPUB page does not snap correctly when layout changed in the multitasking Split View

[vladimirbol]

Bug Report

What happened?

The content of the epub is not correctly aligned with the page when the middle line of the split screen is dragged to either side.

Expected behavior

The content of the epub - page - should be well aligned with the app visible content area after the shift of the middle line everytime.

How to reproduce?

• Use the split view to enable the multitasking on iPad.
• Have the Readium Test App in the left part of the split screen, and whatever second app on the right side
• Scroll somewhere to a middle position in a chapter
• Play with the middle split line in the split screen of the iPad to change the layout of the Readium test app
• You will see the window of the iOS Readium Test App does not show well aligned text, but text from two different pages
• Also the progression seems to be confusing, as the shift is not minor, and the expected page after split line move is several pages away

moby-dick-mo.epub.zip

Environment

Environment: device, simulator,

• ePub file: https://raw.githubusercontent.com/pmstss/epub-books/master/moby-dick-mo.epub
• TestApp: cb62d6c
• swift-toolkit: 2.5.1, 45fde57

Development environment

echo "macOS: sw_vers -productVersion"
macOS: 13.3.1

echo "platform: uname -m"
platform: arm64

echo "carthage: carthage version"
zsh: command not found: carthage

xcodebuild -version
Xcode 14.3
Build version 14E222b

Testing device

• iOS version: iPAd Pro, iOS 16.4., 12.9 Inch
• Is it an emulator? Yes
  Reproducible also on real device.

Additional context

• Are you willing to fix the problem and contribute a pull request? Yes.

• Could an issue with the implementation in scrollToPosition(position, dir), or in snapOffset() functions.

• I can see the same width in both the specific page (when inspected in Safari, the scrollWidth) and also in the native part, spread. Also I assume the width is correct, but the point to which the page is snapped to is either wrong or out of sync: the webview might need a refresh, or the information that the layout has been changed: maxScreenX in the js code is twice as wide as the visible page should be.

• Another code that can affect this behaviour is in the native layer in

    private func xOffsetForIndex(_ index: Int) -> CGFloat {
        (readingProgression == .rtl)
            ? scrollView.contentSize.width - (CGFloat(index + 1) * scrollView.bounds.width)
            : scrollView.bounds.width * CGFloat(index)
    }