blomios/ReadaBook
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): lecteur mobile — couvrir les pages CBZ verticales non chargées par un fallback de la taille de la page (même cellule grid, fond papier stable) pour éliminer les flashs noirs pendant le scroll vertical (bug #42)

Browse Source
This commit is contained in:
Git Agent
2026-08-26 13:46:17 +02:00
parent 6b164d4bde
commit 5fc70d39b7
2 changed files with 24 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
apps/web/src/reader/readerRuntime.test.ts
View File

@ -222,6 +222,15 @@ describe("reader runtime helpers", () => {
expect(verticalBranch).not.toContain('hidden={!imageSizes[item.page]}'); expect(verticalBranch).not.toContain('hidden={!imageSizes[item.page]}');
}); });
it("keeps unloaded CBZ vertical pages visually covered by a page-sized fallback", () => {
const styles = readFileSync(new URL("../styles/app.css", import.meta.url), "utf8");
expect(styles).toContain(".comic-page-frame-vertical > img,\n.comic-page-frame-vertical > .reader-fallback");
expect(styles).toContain(".comic-page-frame-vertical > .reader-fallback {\n width: 100%;");
expect(styles).toContain("min-height: inherit");
expect(styles).toContain("background: #f7f0df");
});
it("starts vertical reader overflow from the top edge instead of centered content", () => { it("starts vertical reader overflow from the top edge instead of centered content", () => {
const styles = readFileSync(new URL("../styles/app.css", import.meta.url), "utf8"); const styles = readFileSync(new URL("../styles/app.css", import.meta.url), "utf8");
const verticalStage = styles.match(/\.reader-mode-vertical \.reader-stage\s*\{[^}]+\}/)?.[0] ?? ""; const verticalStage = styles.match(/\.reader-mode-vertical \.reader-stage\s*\{[^}]+\}/)?.[0] ?? "";

15
apps/web/src/styles/app.css
View File

@ -1114,6 +1114,21 @@ main.app-main-reader .reader-page {
padding: 0 12px; padding: 0 12px;
} }
.comic-page-frame-vertical > img,
.comic-page-frame-vertical > .reader-fallback {
grid-area: 1 / 1;
}
.comic-page-frame-vertical > .reader-fallback {
width: 100%;
min-height: inherit;
box-sizing: border-box;
border: 1px solid var(--line);
border-radius: var(--radius);
background: #f7f0df;
color: #17110d;
}
.pdf-page-frame canvas, .pdf-page-frame canvas,
.cbz-reader img { .cbz-reader img {
display: block; display: block;