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

Question

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

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

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

页面的基本结构是5div的设置如下：

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

    <img class='parallaxing_image_in_background' />

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

</div>

网站上几乎所有的定位和widths/heights都是用百分比来完成的。 .slide 的大小由 .foreground 的宽度设置为 200% 控制，然后 .foreground img 设置宽度：100%，高度：自动。因此，.foreground 最终成为 window 的 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 ！问题解决了。

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

Absolute positioned elements not positioned correctly in FireFox when using Stellar.js

html

javascript

css

firefox

stellar.js