为什么我的全屏背景图像在移动 Chrome 上出现抖动，如何修复？

移动 Chrome 上的背景图像抖动

在开发具有全屏背景图像的响应式网站，可在移动设备、平板电脑和平板电脑之间切换桌面上，观察到 iOS/Android 浏览器或 Chrome 上地址栏隐藏时背景会轻微跳跃Android.

问题源于背景图片的 css 属性，其中包括“固定”和“覆盖”设置。当地址栏消失时，背景 div 的高度会发生变化，因为它设置为 100% 高度。这反过来会影响背景图像，导致其调整其大小和位置以适应新的容器大小。

为了解决此问题，提出了两种解决方案：

解决方案 1：使用 CSS vh 单位（不推荐）

将背景 div 的高度设置为 100vh 可以保持所需的行为；然而，iOS 中存在一个已知的 vh 错误，该错误会导致视口单位测量不一致。尝试使用 max-height 或其他解决方法来缓解此问题均不成功。

解决方案 2：使用 Javascript 根据视口大小设置高度

Javascript 提供了更多可靠的方法，因为它不受 URL 栏大小调整的影响。通过确定视口大小并相应地设置背景 div 的高度，无论地址栏的可见性如何，图像都保持静态。

这是 Javascript 脚本：

var bg = $("#bg1, #bg2");

function resizeBackground() {
    bg.height($(window).height());
}

$(window).resize(resizeBackground);
resizeBackground();

其他调整：

虽然 Javascript 脚本解决了背景调整大小问题，但可能会出现明显的间隙向下滚动时。这可以通过在背景高度计算中添加一个小偏移来解决，有效隐藏潜在的间隙。

function resizeBackground() {
    bg.height( $(window).height() + 60); // Add 60px to compensate for gap
}

以上是为什么我的全屏背景图像在移动 Chrome 上出现抖动，如何修复？的详细内容。更多信息请关注PHP中文网其他相关文章！