Chrome Position:Fixed Inside Position:Absolute Breaking with Iframe/Video

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

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

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

Position Fixed doesn't work in Chrome

I used cjspurg method and it worked. Thanks again!

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

Video tag at Chrome overlays on top

We had a similar issue on our site, and implemented the fix described in this stack overflow page.

In our case, we added the following CSS to a relatively positioned overlay (rather than a fixed position element described in the link above), which kept disappearing behind the video:

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

Very strange chrome bug with z-index and position:fixed

This should fix the issue:

As your header is using position: relative; z-index: 10;, give your container the following style:

.page-content {
      position: relative;
      z-index: 9;
}

This will make sure your header is always over your container.

Is Chrome regressing regarding z-indexes (or what am i doing wrong)?

It's like Chrome created a new z-index stack for each .tab-container instead of just showing all elements with z-index:21 above the rest of the content.

This behavior was deliberately introduced in Chrome 22. Boxes with position: fixed will create new stacking contexts in WebKit-based browsers regardless of their z-index, causing the behavior you're currently seeing.

More on that here. It is said that it is being proposed as a revision to the CSS2.1 spec to aid mobile implementations (the same behavior already occurs on mobile WebKit browsers); it was addressed to some extent in this set of minutes but there hasn't been any actual change to the spec yet as I've seen — indeed; the working group hasn't reached a consensus yet.

I for one agree with Microsoft's compatibility concerns; I can see this breaking a sizable portion of modern sites. The problem is exacerbated by workarounds basically being situational and totally dependent on the nature of the affected layout, as demonstrated by the other answers here.

---

Related Topics