Html 移动电话地址栏脱离固定位置

我通过在如下元素上创建固定位置的背景来创建视差图像：

#element:before {
    content: '';
    background: url('sample.jpg') no-repeat;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
    left: 0;
    top: 0;
    background-position: 68% center;
    transform: translate3d(0,0,0);
}

效果很好，不过我注意到，在手机上，当地址栏出现在视线中时，它实际上会改变我固定元素的位置。有人知道如何避免这种情况吗

---

感谢

位置：修复了移动浏览器中的一些问题。不幸的是，由于这些问题，通常最好避免使用它

基本上，您应该尝试使用
位置：绝对
。
这可以通过动态更改before元素的高度来解决：

在页面上，只有一个带有目标ID的空白样式标记：

<style id="values-styles" type="text/css">

</style>

很好用

var valuesStyles = jQuery('#values-styles');

// since window resize is called when the address bar is shown or hidden
jQuery(window).resize(function() {
valuesStyles.html("#values:before { height:" + jQuery(window).height() + "px;}");
});