EPUB text selection sometime breaks in paginated mode

[mickael-menu]

Bug Report

What happened?

On recent Android versions, the viewport sometime shifts when attempting to move the text selection handle.

selection1.mov

How to reproduce?

1. Open an EPUB on a recent version of Android (tested with API 33).
2. Enable paginated mode.
3. Increase the font size.
4. Go to the second page of a chapter.
5. Long press a word at the top of the page.
6. Drag down the right text selection handle.
7. The selection will shift to the previous page.

This is not very reliable and can be hard to reproduce.

Environment

• Readium version: 2.3.0

Testing device

• Android version: API 33
• Model: Pixel 5
• Is it an emulator? Yes

Additional context

I believe it's a bug related to the CSS columns in the Chrome Web View. I reproduced the bug in a sample project with a chapter modified to use CSS columns:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no"/>
<style>
html {
    column-width: 20em;
    height: 100vh;
}
</style>

Result is the same:

selection2.mov

Here's the test project: TestWebView.zip

[mickael-menu]

Android bug report opened: https://issuetracker.google.com/issues/265334518

[mickael-menu]

It happens on Google Chrome as well. Can be tested with this URL:

https://htmlpreview.github.io/?https://gist.githubusercontent.com/mickael-menu/7db9620b40444f62219abd08a8f22bf3/raw/6494178590b2e54c3b08c6428545970f61b83e51/android-columns.xhtml

chrome.mov

[mickael-menu]

The Android issue was transferred to the Chromium bug tracker: https://bugs.chromium.org/p/chromium/issues/detail?id=1410341

[mickael-menu]

A potential workaround here: futurepress/epub.js#1366 (comment)

[mickael-menu]

It was a dead-end, but it inspired me a different solution: #502