Javascript 反拉伸导致chrome中其他背景图像出现问题

我使用Backstretch.js和Wordpress站点中的自定义字段动态应用全屏背景图像

这对身体背景图像很好，但我在页面上还有另一个元素，背景图像由CSS设置，backstretch似乎把它搞乱了，但只有在Chrome中

当页面加载时，两个背景图像都显示良好，但当我向下滚动页面时，css背景消失了——有时完全消失，有时只是其中的随机部分。如果我删除backstretch，那么CSS bg的行为正常。理想情况下，我希望这两个问题都能得到解决

后拉伸

<?php $image = get_post_meta($post->ID, 'wpcf-background-image', TRUE); ?>
    <?php if ( ! empty ( $image ) ) { ?>
        <script>
            jQuery.backstretch("<?php echo $image ?>");
        </script>
<?php } ?>

}

我目前有2页设置使用backstretch作为背景

及

在FF和Safari中似乎工作良好，但在Chrome（Mac/Mavericks）中则不行。很烦人，因为我只需要使用backstretch，因为固定BG在IOS设备上可以玩得很好

---

N.

上次更新Chrome（38.0.2125.101 m）后，我遇到了同样的反拉伸问题。调试后，我发现是.backstretch类的负z索引值，这把我的网站搞砸了。 将z-index更改为1并将包装器类更改为position:relative和z-index:2之后，一切又恢复正常。

---

希望有帮助

这个解决方案适合我

您需要在Backstretch.js中添加此代码范围

$('body').wrapInner('<div id="backstreach-fix" style="z-index: 1; position: relative;">');

我还需要更改此文件中的zIndex

找到zIndex:-99998并更改为zIndex:1

查找zIndex:-999999并在单页站点中更改为zIndex:0

（）我遇到了Neil Day描述的相同问题。我用了两种方法进行后拉伸。 首先，我用一个动画滑块同步背景图像，用Sweeper am animate.less css库实现。 其次，我通过滚动到一个页面站点的各个部分来同步背景更改

直到Chrome更新全部生效。后收缩停止正常工作

我尝试了Janusz-Chodzicki解决方案（避免负z索引），并进行了一些修正（我分叉了最初的Github项目：），但这只解决了第一个问题

当页面滚动时，我得到了奇怪的结果。固定的背景卷轴，backstrech图像根本不出现，或只是出现片刻或部分剪切，等等

最后，我尝试删除css规则“-webkit backface visibility:hidden”，该规则将animate.less附加到身体上，现在所有的工作方式都和Chrome更新之前一样（alsa，无负z索引修正）

---

我希望这对某些人有用

我也遇到了同样的问题。只有在苹果上。你找到解决方案了吗？这个修复程序对我使用Chrome v 51.0.2704.103 m很有效。谢谢你提供的信息。

$('body').wrapInner('<div id="backstreach-fix" style="z-index: 1; position: relative;">');

0 === a(d).scrollTop() && d.scrollTo(0, 0);