Skip to content

fix(pwa): 修復 iPad Safari 書庫/閱讀頁出現多餘垂直捲軸問題 #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Retsomm merged 1 commit into from
Jul 7, 2026
Merged

fix(pwa): 修復 iPad Safari 書庫/閱讀頁出現多餘垂直捲軸問題 #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions pwa/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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}
Expand Down
13 changes: 11 additions & 2 deletions pwa/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
}
4 changes: 2 additions & 2 deletions pwa/src/page/Library.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down Expand Up @@ -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)' }}>
Expand Down
2 changes: 1 addition & 1 deletion pwa/src/page/Reader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
Loading