Question

我有一个位置很好的position:absolute标题（使用渐变＆amp; transform3d做一个漂亮的动画 - 使标题平滑下降~80px）当我达到~150px的滚动时，我将其位置更改为fixed - 做动画。

在Safari移动设备中，动画完成后，只有50％的导航栏显示出来，贴在页面顶部。另外50％只会在我完全停止滚动动画时出现。从屏幕上移开我的手指。我已应用transform: translate3d(0,0,0);和-webkit-transform: translateZ(0px);来启用硬件加速，但结果保持不变。 .navbar是一个.row，有两个内部div基本相同，所以我想问题不是儿童元素。这只发生在我的iPad上。

以下是一些代码：

CSS

.nav_bar {
    position: absolute;
    top: 52px;
    left: 0;
    right: 0;

    transform: translate3d(0,0,0);
    transition: transform .3s ease;

    z-index: 2;

   .&.is-fixed  {
        position: fixed;
        top: -80px;

        transform: translate3d(0,100%,0);
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);

        &:before {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;

            background-color:$bright-turquoise;
            background: linear-gradient(to right, $cobalt 50%, $bright-turquoise 100%);

            content: '';
   }
}

JS（CoffeScript）

(window).scroll ->
  scroll = $(window).scrollTop()
  windowWidth = $(window).width()

  if windowWidth >= 1024
    if scroll >= $('.area_1').height()and
    scroll < $('.footer').offset().top - 150
      $navbar.addClass 'is-fixed'
    else if scroll < $('.area_1').height() || scroll > $('.footer').offset().top - 150 
      setTimeout (->
        $navBar.removeClass 'is-fixed'
        return
      ), navAnimationTimer
    return

任何人都有同样的问题或知道解决方案？

Answer 1

您是否尝试过为标题will-change属性？也许这种方式Safari会观察变化（更好）。我在几个页面，甚至其他（移动）浏览器上都注意到了这种行为。我的一般解决方法始终是在开头修改标题，以便浏览器不必重新渲染所有内容。

Safari - 固定导航栏会显示，直到滚动动画结束

1 个答案: