readium / kotlin-toolkit

A toolkit for ebooks, audiobooks and comics written in Kotlin
https://readium.org/kotlin-toolkit
BSD 3-Clause "New" or "Revised" License
194 stars 83 forks source link

Attempting to highlight makes the page jump backwards in ebooks with long paragraphs #417

Closed radusalagean closed 1 year ago

radusalagean commented 1 year ago

Bug Report

What happened?

Some users reported the following unwanted behavior when using the highlight feature: attempting to highlight a section makes the e-reader jump a few pages backwards on some books, while holding the finger down to select the desired text.

I took one of the books that our users reported and opened it with the Readium Sample App. The same unwanted behavior happens there as well.

Since this issue happens only on some books, I opened it with the Sigil EPUB Editor and then opened another EPUB in another window where this issue does not appear. I took a book from the OPDS 2.0 Test Catalog, accessible from the Sample App as a reference book.

The striking difference between them was that the book our users reported the issue on, had that entire chapter as one HTML paragraph (<p> Entire chapter here </p>).

Since I cannot share that book as it is copyrighted, I took the reference book which is in Public Domain and modified Chapter 1 so that the entire chapter is written inside a single paragraph block. With this change, I was able to reproduce the problem. Screenshot 2023-10-27 at 15 39 43 Screenshot 2023-10-27 at 15 41 21

🎞️ Please see this attached video:

https://github.com/readium/kotlin-toolkit/assets/11408459/b10403c8-2c9c-4d78-be07-4143dc22dad9

Expected behavior

The e-reader should not jump backwards while highlighting text.

How to reproduce?

  1. Prepare the epub file: a. Option 1: Download the file prepared by me as described above: https://www.dropbox.com/scl/fi/h8mlzoqaq2e4e5w76n5qi/md-edited.epub?rlkey=vvi2bknht0adrqgdxr0j9tvux&dl=1 b. Option 2: Get an epub file and modify it so that the entire chapter is contained in a single paragraph block
  2. Import the epub in the sample app
  3. Navigate to chapter 1 (if you used my file), then go a few pages into the chapter
  4. Highlight something

Environment

Development environment

Testing device

Additional context

I have also seen the issue reported here, but was closed before it was investigated in the sample app.

The same ebook works fine on iOS.

mickael-menu commented 1 year ago

This is a bug in the Chrome Web View, see this issue for more information: https://github.com/readium/kotlin-toolkit/issues/325