Safari 和触摸板特定问题导致动画元素卡住答案

【问题标题】：Safari and Touchpad specific issue causing animated element to get stuckSafari 和触摸板特定问题导致动画元素卡住
【发布时间】：2014-08-02 04:46:36
【问题描述】：

我有一个非常奇怪的问题，我只能在 Safari 的触摸板上观察到。

向下滚动时，我的导航栏通过 CSS 过渡淡入/淡入。如果我碰巧向上滚动，从而删除了负责转换的类，则导航栏会在视觉上卡在错误的位置，仅在 safari 上。 CSS / 样式表示正确的值，甚至悬停/单击处理程序都在正确的位置。

也就是说，在下图中，我的鼠标悬停在空白区域，而卡在下方的导航栏被突出显示。

这有几个奇怪的地方：

该元素是全局样式的导航栏，但仅出现在此特定页面上。
我似乎无法通过鼠标滚动来触发问题。
我只能通过非常细微的触控板动作或快速触控板动作来触发它。

关于如何解决此问题的任何建议？

相关的 CSS

.is-sticky-slide-down {
        @include experimental(animation, fadeInDown .3s ease-out 0s);
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

【问题讨论】：

标签： css browser safari

【解决方案1】：

问题是由于在元素上启用了-webkit-backface-visibility: hidden。删除悬停故障的“修复”（如抽动不透明度褪色）修复了 Safari 上的其他故障。

明确地说，解决方法是从受影响的元素中删除 -webkit-backface-visibility。

【讨论】：