readest/apps/readest-app/.claude/memory/duokan-fullscreen-cover-scroll.md at 4af203755d807ae317c9ffe4922f5f1e7989a66b

Files

T

Huang Xin de3e4b6d3c fix(reader): show Duokan fullscreen cover in scrolled mode (#4379 ) (#4381 )

A cover with `data-duokan-page-fullscreen` on <html> renders in
paginated mode but is blank in scrolled mode; only the first cover is
affected, other images are fine in both modes.

The paginator's fullscreen branch pins such images with
position:absolute and height:100% and forces their ancestors to
height:100%. That fills the fixed-height page when columnized, but in
scrolled mode the container height is `auto`, so height:100% resolves
to 0 and the cover collapses out of view.

Bump foliate-js to gate the fullscreen treatment on column mode and
reset any stale absolute pinning when a fullscreen-cover doc is laid
out scrolled (so toggling paginated -> scrolled also recovers). Add a
browser regression test + repro-4379.epub fixture.

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

2026-05-31 07:52:42 +02:00

2.4 KiB

Raw Blame History

name, description, metadata

name

description

metadata

duokan-fullscreen-cover-scroll

Duokan fullscreen cover image invisible in scrolled mode (#4379) — paginator pins it position:absolute height:100% which collapses against auto-height scroll container

node_type	type	originSessionId
memory	project	c45aabf0-e8a3-42b6-a5fd-c04d6eb2345c

Issue #4379: an EPUB cover with data-duokan-page-fullscreen on <html> (Duokan/DangDang convention) shows in paginated mode but is blank in scrolled mode; only the first cover image, other images fine in both modes.

Root cause — View.setImageSize() in packages/foliate-js/paginator.js has a pageFullscreen branch that pins each img with position:absolute; inset:0; width:100%; height:100% and forces ancestors + <html> to height:100%/position:relative. This fills the page in paginated/columnized mode (html has a fixed pixel height). In scrolled mode scrolled() sets html/body height to auto, so the height:100% chain resolves to 0 and the absolutely-positioned cover collapses out of view (offsetHeight 0).

Fix — gate the fullscreen treatment on column mode: const applyFullscreen = pageFullscreen && this.#column. Use applyFullscreen for the max-height/max-width margin term and the if block. Add an else if (pageFullscreen) that removePropertys the stale position/inset/width/height/margin on the img (and width/height/margin/padding on ancestors, position on html) so toggling paginated→scrolled doesn't leave the cover collapsed (same iframe/img is reused via view.render(layout) on flow change). In scrolled mode the cover then flows like a normal full-page image bounded by max-height = availableHeight.

Key facts

this.#column = layout.flow !== 'scrolled' (set in render() before setImageSize), so it's reliable inside setImageSize.
Foliate writes these styles as inline !important → cannot be overridden from src/utils/style.ts; the fix must live in the paginator.
Regression test: src/__tests__/document/paginator-duokan-cover.browser.test.ts + fixture repro-4379.epub (cover xhtml with the duokan attr + dimensionless <img>). Asserts cover img.offsetHeight > 0 in scrolled mode, paginated sanity, and paginated→scrolled toggle. Browser test (real layout) is required — jsdom can't compute the collapse.

2.4 KiB Raw Blame History

2.4 KiB

Raw Blame History