视差闪烁..位置：固定是没有选项

Question

我需要在另一个 div 中使用溢出重新定位图像：隐藏，以获得某种“视差效果”，但这里没有选择使用“位置：固定”，因为固定定位的元素不在乎关于“溢出：隐藏”父母...所以我需要在 JS (jQuery) 中执行此操作。

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

有没有办法解决这个问题？ Spotify 使用相同的效果：https://www.spotify.com/uk/，但他们使用 2 个元素来实现此效果，第一个只是 Keyvisual-Image 的占位符，第二个是固定位置的元素，其中包含实际图像。

对于我的示例，这是不可能的，因为我稍后需要使用 CMS（Typo3），在那里，不可能将每个 Keyvisual 放置两次（占位符 + 图像） - 这是可能的，但这对我来说很不舒服编辑...

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

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

这是脚本的重要部分：

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 的引擎在滚动时设置了一个 position:absolute Element 的新 Viewport Position。在计算并设置新位置后，我的 jQuery(window).scroll 会跳入并为 position:absolute Element 设置一个新的/其他位置。因此，如果您按像素滚动（例如 Mac 上的魔术鼠标），那么每次在 jQuery 施展魔法之前，浏览器引擎都会自行设置一个新位置 - 这会导致闪烁！

仅当您将元素设置为 position:fixed 时浏览器不会触及它们的位置...

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