Question

我在当前的Firefox中有一个奇怪的错误。我正在运行一个视差脚本（我认为它来自Materialise），这是来源：

＆＃13;

(function($) {
  $.fn.parallax = function() {
    var window_width = $(window).width();

    return this.each(function(i) {
      var $this = $(this);
      $this.addClass('parallax');

      $this.find('img').each(function() {
        $(this).css('background-image', 'url(' + $(this).prop('currentSrc') + ')');
        $(this).attr('src', 'data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==');
        $(this).attr('srcset', '');
      });

      function updateParallax(initial) {
        var container_height;
        // if (window_width < 992) {
        container_height = ($this.height() > 0) ? $this.height() : $this.children("img").height();
        // }
        // else {
        // container_height = ($this.height() > 0) ? $this.height() : 500;
        // }
        var img_height = $this.children("img").height();
        var parallax_dist = img_height - container_height;
        var bottom = $this.offset().top + container_height;
        var top = $this.offset().top;
        var scrollTop = $(window).scrollTop();
        var windowHeight = window.innerHeight;
        var windowBottom = scrollTop + windowHeight;
        var percentScrolled = (windowBottom - bottom) / (container_height + windowHeight);
        var parallax = -1 * parallax_dist * percentScrolled;

        console.log(
          'img_height: ' + img_height + '\n' +
          'parallax_dist: ' + parallax_dist + '\n' +
          'bottom: ' + bottom + '\n' +
          'top: ' + top + '\n' +
          'scrollTop: ' + scrollTop + '\n' +
          'windowHeight: ' + windowHeight + '\n' +
          'windowBottom: ' + windowBottom + '\n' +
          'percentScrolled: ' + percentScrolled + '\n' +
          'parallax: ' + parallax + '\n'
        );

        if ((bottom > scrollTop) && (top < (scrollTop + windowHeight))) {
          $this.children("img").first().css('bottom', parallax + "px");
        }
        if (initial) {
          $this.children("img").first().css('display', 'block');
        }
      }

      // Wait for image load
      $this.children("img").one("load", function() {
        updateParallax(true);
      }).each(function() {
        if (this.complete) $(this).load();
      });

      $(window).scroll(function() {
        window_width = $(window).width();
        updateParallax(false);
      });

      $(window).resize(function() {
        window_width = $(window).width();
        updateParallax(false);
      });

    });

  };
}(jQuery));

＆＃13;

.parallax-container {
  position: relative;
  overflow: hidden;
  height: 500px;
}
.parallax {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.parallax img {
  display: none;
  position: absolute;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  background-position: bottom;
  background-size: contain;
  background-repeat: no-repeat;
}

＆＃13;

<div class="full-parallax parallax-container">
  <div class="parallax">
    <img src="http://lorempixel.com/1000/1000/" srcset="http://lorempixel.com/1000/1000/ 2000w, http://lorempixel.com/500/500/ 500w" alt="">
  </div>
</div>

<div class="content">
  <h1>Hello!</h1>
  <p>Text text text text text text</p>
  <p>Text text text text text text</p>
  <p>Text text text text text text</p>
  <p>Text text text text text text</p>
  <p>Text text text text text text</p>
  <p>Text text text text text text</p>
  <p>Text text text text text text</p>
  <p>Text text text text text text</p>
  <p>Text text text text text text</p>
  <p>Text text text text text text</p>
  <p>Text text text text text text</p>
  <p>Text text text text text text</p>
  <p>Text text text text text text</p>
  <p>Text text text text text text</p>
  <p>Text text text text text text</p>
  <p>Text text text text text text</p>
  <p>Text text text text text text</p>
  <p>Text text text text text text</p>
  <p>Text text text text text text</p>
  <p>Text text text text text text</p>
  <p>Text text text text text text</p>
  <p>Text text text text text text</p>
</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
  $(document).ready(function() {
    $('.parallax').parallax();
  });
</script>

＆＃13;

这一切都很好，但在Firefox中这只有在我第一次加载页面时（或者通过删除缓存重新加载）才有效。如果我正常重新加载页面（F5），视差无法正确加载（图像向远处），直到我滚动第一个，然后图像直接跳到位。

问题似乎是FF加载错误的图像大小。在没有缓存的重新加载时，它使用1707读取同一图像的图像高度，并且在正常重新加载时使用缓存读取678.一旦我开始滚动该值，跳转到1707。

编辑：只有当页面滚动到绝对顶部时才会发生，如果我向下滚动1px，它会正确加载图像。

Chrome和Vivaldi做得很好。

Answer 1

这肯定是一个FF错误（https://bugzilla.mozilla.org/show_bug.cgi?id=1281438）

Answer 2

不是您问题的正确解决方案，但解决方法可能是在页面加载时触发scroll事件：

  $(window).on("load", function(){
    $(window).trigger("scroll");
  });//window load
}(jQuery));// last line of your code. Add the trigger code just above this line

Firefox加载视差图像大小错误（仅在刷新时）

2 个答案: