的z-index VS translate3D在Chrome

Question

我決定用：

* { 
    -webkit-transform: translate3d(0px, 0px, 0px); 
} 

，當我看到它使我的動畫更加順暢，可能是因爲它迫使硬件加速。但我還需要進行一些z-index調整，以便在文本前面放置一個形狀，以在動畫的某個點處顯示文字mask。問題是：我的（灰色）形狀必須與另一個形狀（下面示例中的綠色形狀）同步，後者位於文本後面。

我建了一個簡單的example，使之更加直觀。它在Firefox上效果很好，但我無法在Chrome和Safari上使用它。那麼，如果我刪除了translate3d的東西，它就可以工作，但是因爲我的實際項目需要大量的滑動和平滑的動畫，所以如果我這樣做，用戶體驗就會受到影響。

Answer 1

明白了！我們可以使用CSS clip屬性來掩蓋文本，並根據其他對象的位置更新矩形值。這裏有一些信息w3schools.com/cssref/pr_pos_clip.asp。這個鏈接也很有洞察力http://webdesignerwall.com/tutorials/5-simple-but-useful-css-properties。

最後這裏是我的項目，做http://iuqo.com。當你拖動背景時，你會看到正在切割的文字（垂直和很好）。正如我想要的那樣。

Answer 2

沒有translate3D，可以在另一個對象（你的處理程序）和它的一個子對象（你的面具）之間放置一個對等DOM節點（你的文本），但僅僅是因爲你的文本和你的處理程序都沒有明確的z-索引。在這種情況下，首先渲染所有非z索引的塊，然後將遮罩渲染到最後 - 最後放在頂部（即使它是一個子元素）。這有意義嗎？那麼這就是瀏覽器的工作原理。

但是，當您添加translate3d爲「*」，你增加了一個「堆疊語境」到每一個元素，那麼什麼是「發生在工作」沒有translate3d，現在沒有。順便提一句，adding an explicit z-index to each element in your example - 也「毀了」你的面具。同樣，你不能在另一個對等者和它的一個子對象之間定位一個對等DOM節點，因爲就相對於叔叔/阿姨節點的定位而言，子對象繼承父對象的Z-index。

我的建議是你UNNEST的東西，所以要相對於z軸彼此定位一切都是DOM節點。這需要手動計算每個元素的絕對定位，並且您失去了溢出裁剪的好處，但是hey, it works。您也可以通過執行具有正值和負值z值的3D變換來重複此操作 - 但同樣只能在同級元素中進行復制。

（標記的z指數！重要的是，剛剛撤銷的級聯，並將該元素的級聯堆疊順序的頂部，這是一個黑客。）