视差闪烁..position:fixed不是选项

Question

我需要用overflow:hidden在另一个div中重新定位图像，以获得某种“视差效果”，但这里没有使用"position: fixed“的选项，因为固定位置的元素不关心"overflow:hidden”父元素……所以我需要用JS (jQuery)来做这件事。

在火狐中，一切看起来都很好，但在基于Webkit的浏览器和IE9上，背景图像(狗)是闪烁的，看看这个jsfiddle示例：http://jsfiddle.net/7J5AM/1/

有没有办法绕过这个问题？Spotify使用相同的效果：https://www.spotify.com/uk/，但他们使用两个元素来实现此效果，第一个元素只是关键视觉图像的占位符，第二个元素是包含实际图像的固定定位元素。

对于我的例子，这是不可能的，因为我需要使用一个内容管理系统(Typo3)，在那里，它不可能放置每个键视图两次(占位符+图像)-嗯，这是可能的，但这对我的编辑器来说非常不舒服……

有没有办法绕过这种闪烁？

编辑:使用图像作为背景图像也是不可能的，因为我需要为响应式设计目的调整图像大小...

以下是脚本的重要部分：

var win_h = jQuery(window).height();
var scroll_top = jQuery(document).scrollTop();
var kv_pos = jQuery(this).parent().offset();

if(parseFloat(kv_pos.top) < (win_h + scroll_top)) {
    var new_top = (((scroll_top - kv_pos.top + 90) / 100) * 60);
    jQuery(this).css('top',new_top);
}

Answer 1

似乎没有办法使用position:absolute来做到这一点。问题是，Webkit和IE的引擎在滚动时设置了位置:绝对元素的新的Viewport位置。在计算并设置了新的位置之后，我的jQuery(窗口).scroll跳进来并为position:absolute元素设置了一个新的/其他位置。因此，如果你滚动每个像素(例如Mac上的魔术鼠标)，那么每次在jQuery发挥它的魔力之前，浏览器引擎本身就会设置一个新的位置-这会导致闪烁！

仅当您将元素设置为位置时:修复了浏览器不会接触它们的位置...

所以我解决这个问题的方法是:在document.ready之后，我将我的Keyvisuals设置为visibility:hidden，然后复制body-tag后面的内容。然后，所有这些副本都是位置:固定的，我现在所做的就是根据它们的“隐藏占位符”将高度和顶值设置为1-就像Spotify一样。