jqueryで背景画像をパララックスしたい

Question

https://www.webdesignleaves.com/wp/jquery/604/

<script>
jQuery(function($){
  var $window = $(window);
 
  $('.content').each(function(index) {
    var $self = $(this);
    var offsetPositions = $self.offset();
 
    $(window).scroll(function() {
      // この領域がブラウザに表示されている場合
      if (($window.scrollTop() + $window.height()) > offsetPositions.top && ((offsetPositions.top + $self.height()) > $window.scrollTop())) {
        var offsetY =  -(($window.scrollTop() - offsetPositions.top)/ 17); 
        //var offsetY =  -($window.scrollTop()/ 17); 
        var positions = '50%' + offsetY + 'px';
        $self.css('backgroundPosition', positions);
      }
    });
  });
});
</script>

上記の方法でパララックスのアニメーションを実装しています。
しかし、chromeの場合、要素(.content)がまだ画面上に表示されていないにも関わらず、
パララックスが開始してしまい、背景画像が足りなくなり、思い通りの実装ができません。

※firefoxは要素が表示されてからパララックスが開始されるので、問題ありません。

Comments

[Lhankor_Mhy]

ご提示のサンプル（ https://www.webdesignleaves.com/samples/jQuery/parallax/css_pallarax2.html ）を拝見しましたが、「背景画像が足りなくなり」という状況がよくわかりませんでした。
1枚目の画像の下に、桜が少し見えるのがそれですか？