如何在Safari浏览器中为网页设置背景
我正在用 Next.js 和 Tailwind CSS 构建一个网站。我其实想用下面的代码实现一个特定的背景：
<body>
<div aria-hidden="true" className="pointer-events-none fixed inset-x-0 top-0 h-dvh -z-10 overflow-hidden bg-background">
<div className="absolute inset-0 bg-linear-to-b from-blue-50/60 via-transparent to-violet-50/40"/>
<div className="absolute -left-32 -top-24 h-136 w-136 rounded-full bg-blue-400/30 blur-[130px]"/>
<div className="absolute -right-32 top-16 h-144 w-xl rounded-full bg-violet-400/25 blur-[140px]"/>
<div className="absolute left-[8%] top-[8%] h-104 w-104 rounded-full bg-cyan-400/20 blur-[150px]"/>
<div className="absolute -left-56 top-[44%] h-128 w-lg rounded-full bg-sky-400/18 blur-[140px]"/>
<div className="absolute -bottom-48 -right-32 h-136 w-136 rounded-full bg-rose-400/18 blur-[140px]"/>
</div>
<-- Website content -->
</body>
正如你所见，在iPhone的 Safari上，背景无法延伸到地址栏下方。
我猜这个问题可能出现在所有拥有类似地址栏的浏览器上。我唯一的解决办法是在body上设置背景颜色，但在我的情况下这是不可能的。
如何在不破坏对其他浏览器兼容性的前提下，让背景覆盖到这个地址栏下方？
解决方案
我认为没有办法做到这一点。我发现一个块级元素，其 height 设置为 100svh，会在地址栏区域正好停止。
改用另一种单位，如 100vh 或 100lvh，只会引入滚动，滚动确实会进入地址栏下方的区域，但这是通过滚动实现的，并非所期望。我看到其他尝试实现非纵向滚动的网页应用也在面临同样的问题（例如，在iPhone的 Safari中 Gmail的内容在地址栏处完全停止滚动）。
我为自己的网站尝试过很多方法，但不幸的是都不起作用。
这里可能有一个极其hack的 JavaScript解决方案，但我认为没有一个是干净的。
站内所有文章版权归属LeftHeroAI导航站，无授权禁止任何主体转载、抄袭、复制内容，亦不得私自架设镜像站点。一经侵权，本站将通过法律途径追责。
相关文章
汇集全球数千款 AI 工具，每日持续更新，配套 AI 开发学习资源，轻松用 AI 提升工作效率。快捷键 Ctrl+D/⌘+D 一键收藏本站。