HTML5視頻，位置絕對z-index -1，懸停Chrome bug

Question

我正在一個網站上工作，該網站有一個全屏視頻（高度=窗口高度），頂部有文字，下面有固定導航位置。

使用此組合，無論何時向下滾動我的導航中的懸停都不會注冊

我嘗試在Jsfiddle上發布這個但是它太多了...所以我把它放在其他地方： 鏈接

video {position: absolute;z-index: -1;}

導致帶有文本'Hover me'的固定塊在其懸停時不會更新。 我只能在Mac OS上的Google Chrome中重現此錯誤。

演示視頻： 鏈接

Answer 1

許多鉻分層問題的標准答案通常是使事物成為單獨的硬件加速層。 嘗試添加

-webkit-backface-visibility: hidden;

...到您的視頻或導航。