From 66f082ae84d0bdb75a699123bf73c6d6ef7812ca Mon Sep 17 00:00:00 2001
From: Retsomm <112182ssss@gmail.com>
Date: Tue, 7 Jul 2026 19:38:16 +0800
Subject: [PATCH] =?UTF-8?q?fix(pwa):=20=E4=BF=AE=E5=BE=A9=20iPad=20Safari?=
 =?UTF-8?q?=20=E6=9B=B8=E5=BA=AB/=E9=96=B1=E8=AE=80=E9=A0=81=E5=87=BA?=
 =?UTF-8?q?=E7=8F=BE=E5=A4=9A=E9=A4=98=E5=9E=82=E7=9B=B4=E6=8D=B2=E8=BB=B8?=
 =?UTF-8?q?=E5=95=8F=E9=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

改用 dvh 動態視窗高度並鎖定 html/body/#root 高度為 100%、overflow hidden，
避免 iOS Safari 工具列展開收合造成 100vh 計算誤差，導致底部頁數內容被藏在可視範圍外。

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 pwa/src/App.tsx          |  4 ++--
 pwa/src/index.css        | 13 +++++++++++--
 pwa/src/page/Library.tsx |  4 ++--
 pwa/src/page/Reader.tsx  |  2 +-
 4 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/pwa/src/App.tsx b/pwa/src/App.tsx
index e19cbaa..e131744 100644
--- a/pwa/src/App.tsx
+++ b/pwa/src/App.tsx
@@ -16,7 +16,7 @@ const App = () => {
   if (window.location.pathname === '/private') {
     return (
       <div className={darkMode ? 'dark' : ''}>
-        <div className="min-h-screen bg-stone-50 dark:bg-gray-900 transition-colors">
+        <div className="h-dvh overflow-y-auto bg-stone-50 dark:bg-gray-900 transition-colors">
           <Privacy darkMode={darkMode} onToggleDark={() => setDarkMode(!darkMode)} />
         </div>
       </div>
@@ -69,7 +69,7 @@ const App = () => {
 
   return (
     <div className={darkMode ? 'dark' : ''}>
-      <div className="min-h-screen bg-stone-50 dark:bg-gray-900 transition-colors">
+      <div className="h-dvh overflow-hidden bg-stone-50 dark:bg-gray-900 transition-colors">
         {view === 'library' && (
           <Library
             records={records}
diff --git a/pwa/src/index.css b/pwa/src/index.css
index aa41100..232a388 100644
--- a/pwa/src/index.css
+++ b/pwa/src/index.css
@@ -6,10 +6,19 @@
   --font-reading: Georgia, serif;
 }
 
-/* 防止 iOS 水平 rubber-band 捲動，保留垂直捲動供書庫頁使用 */
+/* 防止 iOS 水平 rubber-band 捲動；並鎖定整頁高度為視覺視窗高度，
+   避免 Safari 網址列造成 100vh 誤判而產生整頁垂直捲軸（底部頁數等內容被藏在可視範圍外）。
+   捲動一律交由頁面內部指定容器（如書庫清單）的 overflow-y-auto 處理。 */
+html,
+body,
+#root {
+  height: 100%;
+  overflow: hidden;
+  overscroll-behavior: none;
+}
+
 html,
 body {
   overflow-x: hidden;
-  overscroll-behavior-x: none;
   max-width: 100%;
 }
diff --git a/pwa/src/page/Library.tsx b/pwa/src/page/Library.tsx
index 095a006..8be30a2 100644
--- a/pwa/src/page/Library.tsx
+++ b/pwa/src/page/Library.tsx
@@ -67,7 +67,7 @@ const Library = ({ records, getCoverDataUrl, onAddBooks, onOpenBook, onRemoveBoo
 
   if (records.length === 0) {
     return (
-      <div className="flex flex-col min-h-screen" style={{ background: paperBg, color: inkCol }}>
+      <div className="flex flex-col h-full" style={{ background: paperBg, color: inkCol }}>
         <div className="flex items-center justify-between px-4 py-3" style={{ paddingTop: 'max(env(safe-area-inset-top), 12px)' }}>
           <div className="flex-1" />
           <button className="p-2 rounded-full transition" style={{ color: ink3Col }} onClick={onToggleDark}>
@@ -109,7 +109,7 @@ const Library = ({ records, getCoverDataUrl, onAddBooks, onOpenBook, onRemoveBoo
     <>
       {pendingRemove && <ConfirmModal bookTitle={pendingRemove.title} onConfirm={handleConfirmRemove} onCancel={handleCancelRemove} />}
 
-      <div className="flex flex-col min-h-screen" style={{ background: paperBg, color: inkCol }}>
+      <div className="flex flex-col h-full" style={{ background: paperBg, color: inkCol }}>
 
         {/* ── Header ── */}
         <div style={{ borderBottom: `1px solid ${borderCol}`, background: paperBg, paddingTop: 'env(safe-area-inset-top)' }}>
diff --git a/pwa/src/page/Reader.tsx b/pwa/src/page/Reader.tsx
index 626b027..b5011f4 100644
--- a/pwa/src/page/Reader.tsx
+++ b/pwa/src/page/Reader.tsx
@@ -162,7 +162,7 @@ const Reader = ({ bookPath, bookId, bookRecord, getCoverDataUrl, onBack, darkMod
 
   return (
     <div
-      className="flex flex-col h-screen"
+      className="flex flex-col h-full"
       style={{ background: darkMode ? '#1a1816' : '#f9f7f2' }}
       onPointerDownCapture={noteUserInteraction}
       onTouchStartCapture={noteUserInteraction}