From 7f4c29bd33b3c6f55bf18ca458baf1344fb043a7 Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Sat, 6 Jun 2026 15:28:48 +0330
Subject: [PATCH] fix in ios 18

---
 src/pages/viewer/components/BookPage.tsx       |  1 -
 src/pages/viewer/components/BookViewer.tsx     |  1 -
 src/pages/viewer/styles/entranceAnimations.css | 11 +++++++++++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/pages/viewer/components/BookPage.tsx b/src/pages/viewer/components/BookPage.tsx
index c845f0d..a0fe4c9 100644
--- a/src/pages/viewer/components/BookPage.tsx
+++ b/src/pages/viewer/components/BookPage.tsx
@@ -687,7 +687,6 @@ const BookPage = forwardRef<HTMLDivElement, BookPageProps>(
           boxSizing: 'border-box',
           width: `${width}px`,
           height: `${height}px`,
-          isolation: useHardPage ? undefined : 'isolate',
           zIndex: 1,
           ...(useHardPage
             ? { backgroundColor: effectiveBackgroundColor, ...bgStyle }
diff --git a/src/pages/viewer/components/BookViewer.tsx b/src/pages/viewer/components/BookViewer.tsx
index 567201e..485143f 100644
--- a/src/pages/viewer/components/BookViewer.tsx
+++ b/src/pages/viewer/components/BookViewer.tsx
@@ -474,7 +474,6 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
                     className="max-w-full flex justify-center shrink-0 rounded-sm"
                     style={{
                         overflow: 'hidden',
-                        isolation: 'isolate',
                         width: usePortrait ? pagePixelWidth : pagePixelWidth * 2,
                         height: pagePixelHeight,
                         boxShadow: isDesktop
diff --git a/src/pages/viewer/styles/entranceAnimations.css b/src/pages/viewer/styles/entranceAnimations.css
index 4a938a4..df09c0e 100644
--- a/src/pages/viewer/styles/entranceAnimations.css
+++ b/src/pages/viewer/styles/entranceAnimations.css
@@ -1,5 +1,16 @@
 /* PowerPoint-style entrance animations for viewer (keyframes use --ve-* vars from JS) */
 
+/*
+ * Hint GPU compositing layer on page elements to prevent blank/white pages
+ * during page flip animations on iOS 17/18 Safari (WebKit compositing bug
+ * triggered when isolation:isolate interacts with 3D CSS transforms).
+ */
+.stf__block,
+.stf__item,
+.page {
+  will-change: transform;
+}
+
 @keyframes viewer-entrance-fade {
   from {
     opacity: 0;