diff --git a/apps/readest-app/src/__tests__/utils/style.test.ts b/apps/readest-app/src/__tests__/utils/style.test.ts
index 8495821c..ee8ecd2f 100644
--- a/apps/readest-app/src/__tests__/utils/style.test.ts
+++ b/apps/readest-app/src/__tests__/utils/style.test.ts
@@ -245,17 +245,17 @@ describe('transformStylesheet', () => {
     it('adds width when both left and right bleed', () => {
       const css = '.bleed { duokan-bleed: left right; }';
       const result = transformStylesheet(css, VW, VH, VERTICAL);
-      expect(result).toContain('width: calc(var(--available-width) * 1px) !important');
-      expect(result).toContain('min-width: calc(var(--available-width) * 1px) !important');
-      expect(result).toContain('max-width: calc(var(--available-width) * 1px) !important');
+      expect(result).toContain('width: calc(var(--full-width) * 1px) !important');
+      expect(result).toContain('min-width: calc(var(--full-width) * 1px) !important');
+      expect(result).toContain('max-width: calc(var(--full-width) * 1px) !important');
     });
 
     it('adds height when both top and bottom bleed', () => {
       const css = '.bleed { duokan-bleed: top bottom; }';
       const result = transformStylesheet(css, VW, VH, VERTICAL);
-      expect(result).toContain('height: calc(var(--available-height) * 1px) !important');
-      expect(result).toContain('min-height: calc(var(--available-height) * 1px) !important');
-      expect(result).toContain('max-height: calc(var(--available-height) * 1px) !important');
+      expect(result).toContain('height: calc(var(--full-height) * 1px) !important');
+      expect(result).toContain('min-height: calc(var(--full-height) * 1px) !important');
+      expect(result).toContain('max-height: calc(var(--full-height) * 1px) !important');
     });
 
     it('does not add bleed styles when vertical is true', () => {
diff --git a/apps/readest-app/src/utils/style.ts b/apps/readest-app/src/utils/style.ts
index d86b0577..e9ceffa2 100644
--- a/apps/readest-app/src/utils/style.ts
+++ b/apps/readest-app/src/utils/style.ts
@@ -769,15 +769,15 @@ export const transformStylesheet = (css: string, vw: number, vh: number, vertica
       }
       if (directions.includes('left') && directions.includes('right')) {
         block = block
-          .replace(/}$/, ' width: calc(var(--available-width) * 1px) !important; }')
-          .replace(/}$/, ' min-width: calc(var(--available-width) * 1px) !important; }')
-          .replace(/}$/, ' max-width: calc(var(--available-width) * 1px) !important; }');
+          .replace(/}$/, ' width: calc(var(--full-width) * 1px) !important; }')
+          .replace(/}$/, ' min-width: calc(var(--full-width) * 1px) !important; }')
+          .replace(/}$/, ' max-width: calc(var(--full-width) * 1px) !important; }');
       }
       if (directions.includes('top') && directions.includes('bottom')) {
         block = block
-          .replace(/}$/, ' height: calc(var(--available-height) * 1px) !important; }')
-          .replace(/}$/, ' min-height: calc(var(--available-height) * 1px) !important; }')
-          .replace(/}$/, ' max-height: calc(var(--available-height) * 1px) !important; }');
+          .replace(/}$/, ' height: calc(var(--full-height) * 1px) !important; }')
+          .replace(/}$/, ' min-height: calc(var(--full-height) * 1px) !important; }')
+          .replace(/}$/, ' max-height: calc(var(--full-height) * 1px) !important; }');
       }
     }
     return selector + block;
diff --git a/packages/foliate-js b/packages/foliate-js
index af4f384b..0a0cedab 160000
--- a/packages/foliate-js
+++ b/packages/foliate-js
@@ -1 +1 @@
-Subproject commit af4f384b743658657ee817ec027c0a2eb3bbb1ec
+Subproject commit 0a0cedabb69fe93524b53a93f74adb0876fd6be8