From 5fc70d39b7b2a9798c3795692981e27531e0631d Mon Sep 17 00:00:00 2001
From: Git Agent <git@readabook.local>
Date: Wed, 26 Aug 2026 13:46:17 +0200
Subject: [PATCH] =?UTF-8?q?fix(web):=20lecteur=20mobile=20=E2=80=94=20couv?=
 =?UTF-8?q?rir=20les=20pages=20CBZ=20verticales=20non=20charg=C3=A9es=20pa?=
 =?UTF-8?q?r=20un=20fallback=20de=20la=20taille=20de=20la=20page=20(m?=
 =?UTF-8?q?=C3=AAme=20cellule=20grid,=20fond=20papier=20stable)=20pour=20?=
 =?UTF-8?q?=C3=A9liminer=20les=20flashs=20noirs=20pendant=20le=20scroll=20?=
 =?UTF-8?q?vertical=20(bug=20#42)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/reader/readerRuntime.test.ts |  9 +++++++++
 apps/web/src/styles/app.css               | 15 +++++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/apps/web/src/reader/readerRuntime.test.ts b/apps/web/src/reader/readerRuntime.test.ts
index 82d2896..ee9fb8e 100644
--- a/apps/web/src/reader/readerRuntime.test.ts
+++ b/apps/web/src/reader/readerRuntime.test.ts
@@ -222,6 +222,15 @@ describe("reader runtime helpers", () => {
     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", () => {
     const styles = readFileSync(new URL("../styles/app.css", import.meta.url), "utf8");
     const verticalStage = styles.match(/\.reader-mode-vertical \.reader-stage\s*\{[^}]+\}/)?.[0] ?? "";
diff --git a/apps/web/src/styles/app.css b/apps/web/src/styles/app.css
index f22ba0e..7e28046 100644
--- a/apps/web/src/styles/app.css
+++ b/apps/web/src/styles/app.css
@@ -1114,6 +1114,21 @@ main.app-main-reader .reader-page {
   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,
 .cbz-reader img {
   display: block;