Android browser's position: fixed and z-index issue

Question

Let me share an example for better illustrating:

jsFiddle: http://jsfiddle.net/yhurak3e/

Or you can read it here:

#box1 {
  width: 100%;
  height: 40px;
  position: fixed;
  top: 0;
  left: 0;
  background: green;
  z-index: 5;
}

#box2 {
  height: 300px;
  position: relative;
  background: yellow;
}

#box3 {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: fixed;
  background: black;
  opacity: .8;
  z-index: 10;
}

#box4 {
  left: 20px;
  top: 20px;
  right: 20px;
  bottom: 20px;
  position: fixed;
  background: blue;
  z-index: 11;
}

<div id="box1">box1</div>
<div id="box2">box2
  <div>
    <div id="box4">box4</div>
  </div>
</div>
<div id="box3">box3</div>

In every other browser, the #box4 (the blue one) appears on the top of the other elements unless I give a z-index property to one of it's ancestors. This is the expected result.

In Android's default browser (tested on 4.1) the #box4 lies under the #box1 and #box3.

Does anybody know a CSS workaround to fix it?

Thx!

Did you ever fix this? Having similar issues that the `backface-visibility` trick doesn't fix. — AlexKempton, Feb 15 '15 at 16:45

score 3 · Answer 1 · edited May 23 '17 at 11:46

3

A workaround for a similar problem from this thread is to apply

-webkit-transform:translateZ(0);

to #box4.

edited May 23 '17 at 11:46

Community

1
1

answered Oct 16 '14 at 16:59

yscik

879
4
7

3

I've tried it already. Doesn't work. Neither the `-webkit-backface-visibility` workaround. – Burnee Oct 17 '14 at 13:16

iorgv · Answer 2 · 2023-04-17T14:51:29.490

You have to apply the above mentioned workaround on the parent element or elements of the #box4, along with applying the -webkit-transform:translateZ(0); to the #box4 like this:

#box1 {
  width: 100%;
  height: 40px;
  position: fixed;
  top: 0;
  left: 0;
  background: green;
  z-index: 5;
}

#box2 {
  height: 300px;
  position: relative;
  background: yellow;
}

#box3 {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: fixed;
  background: black;
  opacity: .8;
  z-index: 10;
}

#box4 {
  left: 20px;
  top: 20px;
  right: 20px;
  bottom: 20px;
  position: fixed;
  background: blue;
  z-index: 11;
}

#box1,
#box2 {
  /*parent*/
  -webkit-backface-visibility: hidden;
  /* Chrome, Safari, Opera */
  backface-visibility: hidden;
}

#box4 {
  /*child*/
  -webkit-transform: translateZ(0);
  /* Chrome, Safari, Opera */
  transform: translateZ(0);
}

<div id="box1">box1</div>
<div id="box2">
  box2
  <div>
    <div id="box4">box4</div>
  </div>
</div>
<div id="box3">box3</div>

Android browser's position: fixed and z-index issue

2 Answers2