HTML position Bug fixed
Building a website for my university project and ran into a small issue while viewing my site in Chrome (which is usually great for compatibility, so I'm probably playing a dead end). I set the title bar and "controls_container" to both positions: fixed to keep them in mind when scrolling the page, but in Chrome they are not fixed, whereas in IE Safari and Firefox it works as intended.
This is the top of the page viewed in Chrome:
This happens after scrolling in Chrome:
(Header bar scrolls up, just like the cursor buttons on the left)
This happens after scrolling in IE:
Unable to remove z-index from video as background video. Here is a link to my site, any help would be greatly appreciated! http://conet.co.uk/p_c_h/explore.html
source to share
The items you mentioned are the title bar and .controls_container
are actually corrected. The problem here is the rendering, which acts oddly when you use the background video.
Try adding backface-visibility: hidden;
or transform: translateZ(0);
to the styles of the fixed elements and the problem goes away. These attributes put your fixed elements on a separate rendering layer - the stacking context - and the browser renders them correctly.
source to share
Similar to the rendering issue in Chrome. If you remove the "banner_video" node, everything works as expected.
See https://code.google.com/p/chromium/issues/detail?id=402211
source to share