css - Chrome position:fixed inside position:absolute breaking with iframe / video

Question

I've spent 2 hours on this crazy bug on one of my websites which has huge amount of content, until I figured what was causing the issue; On Chrome it appears that position:fixed element inside a position:absolute element (which has a z-index) would not work like a position:fixed element would.

---

Note - only on Chrome windows (not on ubuntu).

---

I want to post this question and my answer so others won't get frustrated from Chrome and it's crazy bugs. see demo:

TEST PAGE: http://jsbin.com/uhuzoy/2/edit

Answer 1

FIX: add these rules to the position:fixed element:

-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);