fix: 修复 iOS Safari 上历史记录列表无法滚动的问题

补全 html → body → #root 的高度链，使用 dvh 动态视口单位适配 iOS Safari 地址栏动态收起/展开，添加 overscroll-contain 防止滚动穿透
2026-03-02 07:14:18 +08:00
parent 0cb6dd418f
commit fc34989eaa
3 changed files with 4 additions and 4 deletions
--- a/web/index.html
+++ b/web/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="zh-CN">
+<html lang="zh-CN" class="h-full">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
@@ -12,7 +12,7 @@
    <title>VoicePaste</title>
 </head>
 <body class="h-full bg-bg text-fg overflow-hidden select-none">
-    <div id="root"></div>
+    <div id="root" class="h-full"></div>
    <script type="module" src="src/main.tsx"></script>
 </body>
 </html>
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -15,7 +15,7 @@ export function App() {

 	return (
 		<>
-			<div className="relative z-1 mx-auto flex h-full max-w-[480px] flex-col px-5 pt-[calc(16px+env(safe-area-inset-top,0px))] pb-[calc(16px+env(safe-area-inset-bottom,0px))]">
+			<div className="relative z-1 mx-auto flex h-dvh max-w-[480px] flex-col px-5 pt-[calc(16px+env(safe-area-inset-top,0px))] pb-[calc(16px+env(safe-area-inset-bottom,0px))]">
 				<header className="flex shrink-0 items-center justify-between pt-2 pb-5">
 					<h1 className="font-bold text-[22px] tracking-[-0.03em]">
 						VoicePaste
--- a/web/src/components/HistoryList.tsx
+++ b/web/src/components/HistoryList.tsx
@@ -41,7 +41,7 @@ export function HistoryList({ sendJSON }: HistoryListProps) {
 			{history.length === 0 ? (
 				<p className="py-10 text-center text-fg-dim text-sm">{"暂无记录"}</p>
 			) : (
-				<div className="scrollbar-thin flex-1 overflow-y-auto">
+				<div className="scrollbar-thin flex-1 overflow-y-auto overscroll-contain">
 					{history.map((item, i) => (
 						<button
 							type="button"