Unable to navigate to a particular page using epub cfi

[yashspr]

Hey John, first of all, thanks for building this amazing project. It is much better than epubjs.

Here is what i am trying to do:

1. Save the reading position as I read the book, via the cfi, using the relocate event.
2. On opening the book, open the last read page.

What is happening?
I am retrieving the saved cfi and using the this.view.goTo() method to go to that cfi position. But it doesn't take me to the right page. Its usually one or two pages behind.

Here is a small snippet:

this.view = document.createElement("foliate-view");
this.attach_event_handlers();
await this.view.open(this.book);
document.getElementById(renderToElementId).append(this.view);

this.view.renderer.setStyles(styles);
const saved_cfi = "" // get from local storage

if (saved_cfi) {
  await this.view.goTo(saved_cfi);
} else {
  await this.view.next();
}

What I think is happening?

• The goTo might be calculating the page to go to before the styles are loaded. The styles includes things like font size, font family, etc. which can affect the pagination.
• But when I manually try to call goTo from the browser console after all the styles are loaded, it still fails.

So I am not sure what is happening. Any help here is greatly apprecited. Thanks.

[johnfactotum]

It's hard to say. Some ideas:

• The code for scrolling to range was changed recently since 59bb647 and some subsequent commits. So might try and see whether it works before that.
• To debug this, you can use view.resolveCFI() to get a range from the CFI. Then inspect the range and see whether it's correct, and what rects the browser returns when you call getClientRects(). Compare the coordinates of these rects to view.renderer.start. Either the it's picking the wrong rect (that is, a rect that doesn't really match the visual area of the target), or if it is using the right one, just isn't scrolling to it correctly.

[yashspr]

Thanks for the suggestions. Will debug and let you know

[yashspr]

You were right, the coordinates of the range from the cfi were not matching with the current page. And also noticed something strange. The width of the iframe, and the width of its parent div dont match. In my case, the width of the iframe is ~8000px, the width of the parent div is ~10500px.

And when I scrolled the div#container to position (0,0) using scrollTo, there was just empty space. So, there is some issue with iframe's parent div's width which is creating empty space and affecting the pagination.

When the section initially loads, it is somehow scrolled to the right position, which is why next() and prev() work fine i believe.

[johnfactotum]

No, that's expected. In order to slide out the section when transitioning to the next/previous section, there is one extra empty "page" on both sides of the section, which complicates things a little.

[svera]

@johnfactotum @yashspr this is also happening to me after updating to the latest code. Before updating, the reader relocated to the right position. In my case, I'm using await this.view.init({lastLocation: <pos>}) instead of await this.view.goTo();