Skip to content

Reflowable layout breaks when content contains a tall display:inline-block box #238

Description

@v3nko

Describe the bug

A resource whose content includes a block that is taller than one page and styled display:inline-block does not paginate correctly. Because an inline-block is a monolithic box under CSS fragmentation, the column layout cannot break it across pages: the box overflows its column vertically, the page becomes vertically scrollable.

Container style example:

#_idContainerNNN {
  display: inline-block;
  padding: 12px;
  width: 100%;
}

When such a container holds a boxed exercise/sidebar spanning more than one page height (in our case two nested inline-block boxes with borders, padding, and max-width: 90%), the whole structure is unfragmentable and the paged view degrades to vertical scrolling within the page.

Demo video:

Screen_recording_20260708_160343.mp4

Sample epub: block-pagination-repro.zip

How to reproduce?

  1. Open the attached EPUB file.
  2. Use the paged reflowable navigator with scrolling disabled and the default settings.
  3. Navigate to the pages shown in the attached video, where the content is displayed inside green/olive background containers.

Readium version

3.3.0

Android API version

36

Additional context

The attached demo EPUB is a simplified version of the original EPUB in which the issue was first observed. Since the original file cannot be shared publicly due to copyright restrictions, this demo EPUB was created specifically to reproduce the bug.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    Fields

    No fields configured for Bug.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions