search

futurepress / epub.js

Enhanced eBooks in the browser.
http://futurepress.org
Other
6.31k stars 1.08k forks source link

Does not display the correct location (thru CFI) when font size is large #974

Open strattonpress opened 4 years ago

strattonpress commented 4 years ago

I have stored the current CFI location on rendition.on("relocated") but there are some pages where rendition.display(lastPositionHere) doesn't work correctly. Like, when refreshing the page, epubjs displays the not the last position but the last position's "parent". Then I tried executing rendition.display(lastPositionHere) on the Firefox console and then it renders correctly. It's as if epubjs was displaying the last position but when the styles were applied (larger font size), the viewer adjusted.

BrianSladek commented 4 years ago

I am currently experiencing this issue. Did you find a solution for it?

strattonpress commented 4 years ago

@BrianSladek haven't found a solution yet.

alidbc commented 4 years ago

Any updates/hints? This is major issue for small sceen devices like phones.

I can confirm also that using console to load last position will display correctly. The issue has to do with refresh

johnfactotum commented 4 years ago

This happens because:

  1. You make the font size large
  2. You turn a few pages, and now your location is at, say, the start of the 10th paragraph of a chapter
  3. You refresh the page. It tries to display the last location, in the sense that it would display the page that includes the start of the 10th paragraph. But since the font size is not yet big at this point, your location might now be at, for example, the 7th paragraph, because the font is smaller and more text can fit in one page.
  4. The font is now set to large
  5. It tries to stay at the same position before the font size was changed. But, this "same location" is not the 10th paragraph! "Same location" now means paragraph 7, not your original location.

The solution is simply running rendition.display(lastPositionHere) after applying any themes or style changes. AFAIK that's the only way.

A similar problem occurs when you resize the view multiple times in a row. While it keeps the same location with each resize, the location gradually drifts away from the original location. See https://github.com/futurepress/epub.js/pull/959.

alidbc commented 4 years ago

Thank you johnfactotum for the hints when chanaging font size. The mentioned issue appear even without changing the font. some pages location will load parent position.

It happens when locationOf of content.js returns empty position -> position = range.getBoundingClientRect();

getBoundingClientRect returns 0 for some ranges(RTL books)

to recover from this issue i have to create a container from the range and get bounding client rectangle from the parent node let container = range.startContainer position = container.parentNode.getBoundingClientRect()