Skip to content

Opening or closing the details sidebar breaks EPUB pagination #3915

Open

Description

@AlexAndBear

Initial Checklist

  • I understand this is a bug report and questions should be posted in the Community Discussions
  • I searched issues and couldn’t find anything (or linked relevant results below)

Bug Description

Opening or closing the details sidebar in the EPUB reader doesn't reflow the pages. epub.js only relayouts on the window resize event, and web-app-epub-reader/src/App.vue never calls rendition.resize() when the book container changes size. The text columns keep their old width until the next page turn, which then relayouts mid-chapter.

In addition, the side arrows in ReaderView.vue are translated 40px outside the reader box, which sits in an overflow-hidden wrapper. When the sidebar narrows the reader, clicking an arrow scrolls that wrapper by 40px, cutting off the left edge of the page and the left arrow.

Fix: a ResizeObserver on the book container that calls rendition.resize(), and keep the arrows inside the wrapper.

Reproduction Steps

  1. Window at 1280×800, open an EPUB with multi-page chapters.
  2. Open the details sidebar.
  3. Turn pages with the side arrows, then close the sidebar and turn again.

Expected Outcome

The pages reflow to the new width when the sidebar opens and closes, and the reader stays fully visible.

Actual Outcome

Text is cut off, pages misalign, the last page of a chapter can be skipped, and the reader content is shifted 40px to the left. A real window resize fixes the layout.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions