jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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>
This commit is contained in:
Jeff Emmett 2026-03-31 13:02:28 -07:00
parent 6ce8ede568
commit eec88ac661
2 changed files with 20 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
modules/rbooks/components/folk-book-reader.ts
View File

@ -288,16 +288,16 @@ export class FolkBookReader extends HTMLElement {
// Create page elements // Create page elements
const pages: HTMLElement[] = []; const pages: HTMLElement[] = [];
const pw = Math.round(pageW);
const ph = Math.round(pageH);
for (let i = 0; i < this._pageImages.length; i++) { for (let i = 0; i < this._pageImages.length; i++) {
const page = document.createElement("div"); const page = document.createElement("div");
page.className = "page-content"; page.className = "page-content";
page.style.cssText = ` page.style.cssText = `width:${pw}px; height:${ph}px; background:#fff; overflow:hidden;`;
width: 100%; const img = document.createElement("img");
height: 100%; img.src = this._pageImages[i];
background-image: url(${this._pageImages[i]}); img.style.cssText = "width:100%; height:100%; object-fit:cover; display:block;";
background-size: cover; page.appendChild(img);
background-position: center;
`;
pages.push(page); pages.push(page);
} }

20
modules/rpubs/components/folk-pubs-flipbook.ts
View File

@ -204,13 +204,11 @@ export class FolkPubsFlipbook extends HTMLElement {
for (let i = 0; i < this._pageImages.length; i++) { for (let i = 0; i < this._pageImages.length; i++) {
const page = document.createElement("div"); const page = document.createElement("div");
page.className = "flipbook-page"; page.className = "flipbook-page";
page.style.cssText = ` page.style.cssText = `width:${pageW}px; height:${pageH}px; background:#fff; overflow:hidden;`;
width: 100%; height: 100%; const img = document.createElement("img");
background-image: url("${this._pageImages[i]}"); img.src = this._pageImages[i];
background-size: cover; img.style.cssText = "width:100%; height:100%; object-fit:cover; display:block;";
background-position: center; page.appendChild(img);
background-color: #fff;
`;
pages.push(page); pages.push(page);
} }
@ -384,8 +382,16 @@ export class FolkPubsFlipbook extends HTMLElement {
pointer-events: none; pointer-events: none;
} }
/* Ensure page content fills the flipbook page */ /* Ensure page content fills the flipbook page */
.stf__item {
background: #fff;
}
.flipbook-page { .flipbook-page {
box-sizing: border-box; box-sizing: border-box;
background: #fff;
}
.flipbook-page img {
pointer-events: none;
user-select: none;
} }
.loading { .loading {