CSS transform and fixed position

偶然在動態更新內容發現 fixed 定位不正確的問題

正常來說 position fixed 的物件座標，不管存在任何位置，都以 viewport 為基準，也就是瀏灠器的最左上角為座標 (0, 0)。但如果該物件在 DOM 中的父元件指定了 transform 相關屬性，例如 translate, translate3d, rotate 等，此時該物件 position 屬性會強制變為 relative。

See the Pen fixed-position-transform-issue by Ethan Liu (@ethanliu) on CodePen.

右邊為正常預料中的結果，左邊則其父元件 #container 因指定了 transform 屬性，即使 Y 座標移動距離為 0，整個 .overlay 的區塊仍舊變成 relative 屬性，所以包含 body 的 padding, margin 都是有效的。

有趣的是，Firefox Inspector 也仍認他是 fixed 物件，所以在這裡完全沒有幫助 😝
三大主要瀏灠器 Firefox, Chrome, Safari 的結果一致，不過同樣是 WebKit 的 Chrome 到有點意外，實際發生的狀況比上面的範例複雜許多，但只有 Chrome 顯示的是預期的 fixed 結果。

若以 css transform 運作的方式來思考，這樣或許不算是 bug 只是遇到 position: fixed 狀況的確會另人混淆。確定問題之後搜尋了一下，原來這早在 2011 年就已有人發現。

還好大部份的習慣上，如果遇到需要 fixed 的物件，通常都會儘可能獨立並擺放於最上層，所以也不算太常遇到的狀況。