javascript - 使用 Stellar.js 时，绝对定位元素在 FireFox 中定位不正确

Question

我对 Firefox 处理我建立的网站的方式有疑问。我认为问题与 FF 测量元素高度的方式以及 Stellar.js 与这些高度交互的方式有关。

因此，当我在 IE、Chrome 或 Safari 中访问它时，在我第一次访问它时一切都加载得很好。您会注意到，在这些浏览器中，当您单击导航项时，照片会出现在粉红色前景图形内的指定位置，并对它们产生视差效果。但是，当我在 FF 中访问它时，第一次访问的图像位置很奇怪。如果我单击刷新/按“f5”，问题就会突然解决，图像都在正确的位置。但是，一旦我清除缓存并重新加载页面，图片又出现在错误的位置，直到我再次点击刷新。

(我建议首先使用 FF 以外的其他方式访问该网站，以便您了解我对图像位置的理解)http://www.thelovestrange.com/

页面的基本结构是这样的5个div的设置:

<div class='slide' id="slide1" >

    <img class='parallaxing_image_in_background' />

    <div class='foreground' >
          <img class='portion_of_pink_foreground_image' />
    </div>

</div>

网站上几乎所有的定位和宽度/高度都是用百分比表示的。 .slide 的大小由 .foreground 的宽度设置为 200% 控制，然后 .foreground img 设置宽度:100%，高度:自动。因此，.foreground 最终成为窗口的 200%，而高度是图像最终缩放到的任何高度。

我认为问题在于 FF 读取 .slide div 的高度的方式。这几乎就像您第一次访问该页面一样，它不会在加载 stellar.js 之前及时注册 .slide 的高度，因为高度没有在 css 中明确声明。所以，stellar.js 不知道如何正确定位元素。但是，当您刷新时，高度已被缓存，因此下次加载时，它可以正确定位元素。我可以确认，如果我在 css 中的 .slide 上设置高度，问题就不会发生，并且元素每次都能正确定位。问题是，如果我这样做，网站的响应能力就会崩溃。

我已经尝试查看一些关于 FF 如何在未声明元素高度时处理元素高度的文档，但我找不到任何内容来解释这一点。我尝试对 stellar.js 对象进行一系列调整，但最后，唯一能在访问第一页时正确定位的是那些 .slide div 的高度是否在 css 中明确定义。

显然，让某人访问我客户的站点并且第一次尝试时看不正确不是一个好主意 :)

有什么想法或想法吗？我可以提供任何其他信息或运行测试吗？我很难过。

Answer 1

我找到了解决方案:

在 $(document).ready() 调用 stellar.js 脚本之前不会计算高度，因为它们是基于 .forground 图像的高度。文档已准备就绪，但不一定要加载图像(据我所知)。我将 stellar.js 调用包装在 $(window).load() 中，因此所有内容(包括图像)都在它尝试计算和放置视差图像之前加载，WA LA!问题解决了。