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

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

本文关键字:定位 FireFox 元素 js 使用 Stellar      更新时间:2023-09-26

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

因此,当我在IE,Chrome或Safari中访问它时,第一次访问它时一切都加载得很好。您会注意到,在这些浏览器中,当您单击导航项并对其产生视差效果时,照片会显示在粉红色前景图形内的指定位置。但是,当我在FF中访问它时,第一次访问的图像处于奇怪的位置。如果我单击刷新/按"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>

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

我认为问题出在FF读取.slidediv高度的方式的某个地方。 这几乎就像您第一次访问该页面一样,它不会在恒星加载之前及时记录 .slide 的高度.js因为高度没有在 css 中明确声明。所以,恒星.js不知道如何正确定位元素。但是,当您刷新时,高度已被缓存,因此下次加载时,它可以正确定位元素。 我可以确认,如果我在 css 中的 .slide 上设置高度,则不会出现问题,并且每次元素都会正确定位。 问题是,如果我这样做,网站的响应能力就会分崩离析。

我尝试检查一些有关 FF 在未声明元素高度时如何处理元素高度的文档,但我找不到任何解释这一点的内容。 我尝试对恒星.js对象进行一系列调整,但最终,唯一能在第一页访问时获得正确定位的是那些 .slidediv 的高度是否在 css 中明确定义。

显然,让某人访问我客户的网站并且在第一次尝试时没有正确看到它并不是一个好主意:)

有什么想法或想法吗? 我可以提供任何其他信息或要运行的测试吗?我被难住了。

我找到了解决方案:

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