Safari和觸摸板特定問題導致動畫元素卡住

我有一個非常奇怪的問題，我只能用Safari觀察觸摸板。Safari和觸摸板特定問題導致動畫元素卡住

向下滾動時，我的導航欄通過CSS過渡淡入/淡入。如果我碰巧向上滾動，從而刪除負責轉換的類，則導航欄會在視覺上卡在錯誤的位置，僅限於Safari瀏覽器。 CSS /樣式表示正確的值，甚至懸停/點擊處理程序都在正確的位置。

也就是說，在下圖中，我的鼠標懸停在空白的白色區域，而下方的導航條突出顯示。

有一些奇怪的事情這一點：

的元素是通過全局樣式導航欄，但只有發生這個特定頁面上。
我似乎無法通過滾動鼠標觸發問題。
我只能通過非常微妙的觸控板動作或快速觸控板動作觸發它。

有關如何解決此問題的任何建議？

enter image description here

相關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); 
    } 
}

來源

2014-06-12 Yuji ' Tomita' Tomita

問題是由於對要素啓用-webkit-backface-visibility: hidden。去除懸停故障的這個「修復」（如抽動不透明漸變）修復了Safari上的其他故障。

要清楚，修復是從受影響的元素刪除-webkit-backface-visibility。

來源

2014-06-16 02:57:02

Safari和觸摸板特定問題導致動畫元素卡住

回答

相關問題