【发布时间】：2021-02-03 05:38:35
【问题描述】：
编辑： 上一个问题在下面，但我已经对其进行了调整，因为它不是特定于 Safari 的，恰好 Safari 有一个半透明的地址栏，但现在问题变成了固定的<body>裁剪地址栏，因为它不在视口内。
虽然修复（如果存在）必须保留position: fixed，因为这会阻止 iOS 在覆盖期间滚动正文。
当 body 位置固定时，显示 Safari iOS 地址栏后面的其余元素
我有一个覆盖层，当触发时，将主体设置为 position: fixed 以解决 iOS 能够在后台滚动的问题。我还在文档上使用预先计算的 top 和 height 值设置了正文，以在覆盖层关闭后保留其位置。
问题在于 Safari 有一个透明的地址栏，它会模糊其后面的所有内容，因此当主体固定时它会“捕捉”到白色背景，因为视口顶部“上方”没有任何东西。
我了解position: fixed 从文档流中删除了一个元素，但是当该元素是body 时，我认为将高度设置为大于视口并且不在页面顶部意味着背景应该仍然在地址栏后面“可见”。
我尝试过设置transform: translateY(x%) 的Fixed position but relative to container。我在 body 和 overlay 上都试过了，但 Safari 只是将它从视口中裁剪出来。
设置任何类型的overflow 似乎都不起作用。该元素存在于其上方，只需删除全屏元素并更新开发控制台中的top 值即可显示它仍然存在，因此不会自动被切断（除非您有overflow: hidden）。
当颜色较深或鲜艳，固定后变为白色时，视觉上非常明显。
我见过类似的问题，但最终寻求不同的答案。
在 iOS（和 ipadOS）Safari 版本 12-14 上发生。我无法确认它是否发生在 macOS Safari 上。
这是我正在谈论的内容的糟糕创建图像。
如果你能想象一个覆盖视口的全屏覆盖，红线显示了我所描绘的<body> 元素。它仍然具有完整的高度，top 只是“设置”文档上要注视的位置，但（红色）视口上方的所有内容应该仍然存在，对吗？
显然不是，因为当<body> 被修复时，Safari 决定变为白色。
注意：<body> 通常设置为overflow: hidden 以防止正文滚动，但这意味着它绝对会被fixed: position 切断，所以我把它省略了。
示例 2
顶部：通过透明地址栏显示的红色元素示例
底部：<body> 固定后
【问题讨论】：
标签： css safari css-position mobile-safari web-frontend