From eec88ac661612b64318329d12beb009461cd4d4f Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Tue, 31 Mar 2026 13:02:28 -0700
Subject: [PATCH] fix(flipbook): use <img> elements instead of background-image
 for page rendering

background-image data URLs on divs can fail silently in StPageFlip's
shadow DOM context, producing white pages. Switch to <img> elements
with explicit pixel dimensions and object-fit:cover for reliable
rendering. Add white background to .stf__item as a safety net.
Applies to both folk-pubs-flipbook and folk-book-reader.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 modules/rbooks/components/folk-book-reader.ts | 14 ++++++-------
 .../rpubs/components/folk-pubs-flipbook.ts    | 20 ++++++++++++-------
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/modules/rbooks/components/folk-book-reader.ts b/modules/rbooks/components/folk-book-reader.ts
index 5f9b659..141dae5 100644
--- a/modules/rbooks/components/folk-book-reader.ts
+++ b/modules/rbooks/components/folk-book-reader.ts
@@ -288,16 +288,16 @@ export class FolkBookReader extends HTMLElement {
 
 		// Create page elements
 		const pages: HTMLElement[] = [];
+		const pw = Math.round(pageW);
+		const ph = Math.round(pageH);
 		for (let i = 0; i < this._pageImages.length; i++) {
 			const page = document.createElement("div");
 			page.className = "page-content";
-			page.style.cssText = `
-				width: 100%;
-				height: 100%;
-				background-image: url(${this._pageImages[i]});
-				background-size: cover;
-				background-position: center;
-			`;
+			page.style.cssText = `width:${pw}px; height:${ph}px; background:#fff; overflow:hidden;`;
+			const img = document.createElement("img");
+			img.src = this._pageImages[i];
+			img.style.cssText = "width:100%; height:100%; object-fit:cover; display:block;";
+			page.appendChild(img);
 			pages.push(page);
 		}
 
diff --git a/modules/rpubs/components/folk-pubs-flipbook.ts b/modules/rpubs/components/folk-pubs-flipbook.ts
index e48c03b..3112d60 100644
--- a/modules/rpubs/components/folk-pubs-flipbook.ts
+++ b/modules/rpubs/components/folk-pubs-flipbook.ts
@@ -204,13 +204,11 @@ export class FolkPubsFlipbook extends HTMLElement {
 			for (let i = 0; i < this._pageImages.length; i++) {
 				const page = document.createElement("div");
 				page.className = "flipbook-page";
-				page.style.cssText = `
-					width: 100%; height: 100%;
-					background-image: url("${this._pageImages[i]}");
-					background-size: cover;
-					background-position: center;
-					background-color: #fff;
-				`;
+				page.style.cssText = `width:${pageW}px; height:${pageH}px; background:#fff; overflow:hidden;`;
+				const img = document.createElement("img");
+				img.src = this._pageImages[i];
+				img.style.cssText = "width:100%; height:100%; object-fit:cover; display:block;";
+				page.appendChild(img);
 				pages.push(page);
 			}
 
@@ -384,8 +382,16 @@ export class FolkPubsFlipbook extends HTMLElement {
 				pointer-events: none;
 			}
 			/* Ensure page content fills the flipbook page */
+			.stf__item {
+				background: #fff;
+			}
 			.flipbook-page {
 				box-sizing: border-box;
+				background: #fff;
+			}
+			.flipbook-page img {
+				pointer-events: none;
+				user-select: none;
 			}
 
 			.loading {