Question

我正在尝试解决仅在Safari / Firefox（不是Chrome）中出现的闪烁问题。我有一个很长的页面滚动，一个固定位置的徽标，在过渡到下一部分后会更改，其绝对位置徽标的行为就像通过jquery固定的一样（您可以看看here）。问题在于，jquery正在计算滚动时的顶部偏移量，但似乎无法跟上滚动，徽标闪烁了很多。

如果与检查员检查，它的外观是它正在改变的位置，但是由于某种原因，其滚动速度不同。

我还尝试了使用.css（transform，traslateY（））代替.css（“ top”）（例如here）的另一种解决方案，但仍然显示出相同的结果。

代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

function logoSwitch () {
  $('.altLogo').each(function() {

    var diff = $(".startLogo, .postLogo").offset().top -  $(this).closest('.row').offset().top ;

    $(this).css('top' , '0px')
    $(this).css('-webkit-transform' , 'translateY(' + diff + 'px)')

  });
};

$(document).scroll(function() {logoSwitch();});

logoSwitch();

* {
  padding: 0px;
  margin: 0;
}

.rowstart {
  min-height: 200vh;
  overflow: hidden;
  position: relative;
  width: 100%;
  background-color:        
  rgba(0,110,220,0.4);

}
.row {
  min-height: 200vh;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.blu {
  color: rgba(0,110,220,1);
}

.azul {
  background: #E8F2FC;
}

.logo {
  font-family: "Europa-Bold";
  font-size: 50px;
  top: 20px;
  left: 20px;
  line-height:100%; 
  text-align: left;
  height:60px;
}

.startLogo {
  position: fixed;
}

.altLogo {
  position: absolute;
 -webkit-will-change:transform;
}

.white {
  color: white;
}

<div class="rowstart">

  <div class="logo white startLogo">GIVE A SHIT <br>
    <div class="mission">
    MISSION 
    </div>
  </div> 


</div>


<div class="row azul">

  <h1 class="logo blu altLogo">GIVE A SHIT <br>
   WATER 
  </h1>


</div>

固定徽标的闪烁滚动问题（Safari / Firefox）

0 个答案: