最近遇到一個 CSS bug，主要是在 Chrome 上發生，一開始是有些元素在做 CSS Transition 時會不見，而且有時候 transition 結束還是看不到，要隨便作一些事情觸發瀏覽器 redraw 東西才會回來，作什麼事情又很不一定，而且去 access clientWidth 之類的屬性來想要叫瀏覽器重新畫在這個 bug 上是無效的，後來在網路上找到避開的作法：
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);加上這兩個 CSS 屬性就可以讓會消失的元件不要消失了，後來才知道之前也有同事處理過一樣的問題。然後，接著又遇到另外一個神秘的現象，因為做的東西有投影片播放，動畫 transition 換頁和 video，加起來就是要作一個 transition 讓 video 進入頁面，然後自動播放的機制，結果就發生怪事了，如果 video 沒播過，還沒有 cache 的話，會發生 video 消失的狀況，一開始以為是抓檔案 loading 到真的開始播放之中間的這段時間，Chrome 實作不好，會讓影片節點變成透明的，然後因為其他的問題讓影片卡在那個狀況，所以就變成一直看不到。
後來花了很多時間測試，最後發現影片根本就有在播，只是東西都看不到，進一步發現根本和上面講的是同一個 bug，加上同樣的 style 後，影片就不再消失了，而且連那開始 loading 到開始播放間的那段時間，畫面也完全不會消失了，就從原來給它的 poster 接到真的影片，一切都很順暢。
至於什麼情況下會有這個 bug 出現，目前只知道是position: absolute;的元件加上 transition 後有發生的機會。