我对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>
站点上几乎所有的位置和宽度/高度都是用百分比完成的。通过将.foreground的宽度设置为200％，然后将.foreground img设置为width：100％，height：auto来控制.slide的大小。因此，.foreground最终是窗口的200％，高度是图像最终缩放到的高度。
我认为问题出在FF读取.slide div高度的方式中。几乎就像您第一次访问该页面一样，它没有记录stellar.js加载之前.slide的高度，因为该高度未在css中明确声明。因此，stellar.js不知道如何正确定位元素。但是，当您刷新时，高度已被缓存，因此下次加载时，它可以正确定位元素。我可以确认，如果在css中的.slide上设置了高度，则不会出现问题，并且每次都可以正确定位元素。问题是，如果我这样做，该站点的响应能力就会崩溃。
我曾尝试检查一些有关FF如何在未声明时如何处理元素高度的文档，但找不到任何解释方法。我尝试了对stellar.js对象的一系列调整，但是最后，唯一可以使访问页面正确的方法是，如果这些.slide div的高度在css中明确定义。
显然，让某人访问我的客户的网站并在第一次尝试时无法正确看到它不是一个很好的想法:)
有什么想法或想法吗？我可以提供或测试运行的任何其他信息？我很困惑
最佳答案
我找到了解决方案：
$（document）.ready（）调用stellar.js脚本之前不会计算高度，因为它们基于.forground图像的高度。该文档已准备就绪，但不一定加载图像（据我了解）。我将stellar.js调用包装在$（window）.load（）中，以便在尝试计算和放置视差图像以及WA LA之前加载所有内容（包括图像）！问题解决了。