Video z-index transform rotate abnormal behavior

Question

I have a scene. There are various components on the canvas. There are videos, pictures and common materials.

As shown below, the video (the black one) will block the image below, but the 'z-index'of the image is 2, higher than the 'z-index' of the video is 1

#root {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.css-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
}
.css-rotate {
  position: relative;
  width: 211px;
  height: 375px;
  transform: rotate(90deg);
}
.css-pic {
  /* backface-visibility: hidden; */
  position: absolute;
  display: block;
  z-index: 2;
  left: 43.07px;
  top: 175.78px;
  width: 124.8px;
  height: 83.2px;
  /* background: red; */
}
.css-video {
  position: absolute;
  display: block;
  z-index: 1;
  left: 0px;
  top: 0px;
  width: 210.94px;
  height: 375px;
  background: blue;
}
.css-overflow {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  color: rgb(0, 0, 0);
}
.css-height {
  height: 100%;
}
.css-static {
  position: static;
  width: 100%;
  height: 100%;
}

<html>
  <body>
    <div id="root">
      <div class="css-wrap">
        <div class="css-rotate">
          <div class="css-overflow">
            <div class="css-pic">
              <div class="css-height">
                <img class="css-static" src="https://www.gravatar.com/avatar/43111ebfc98a0b559c4a1dc31b6e39f6?s=32&d=identicon&r=PG">
              </div>
            </div>
            <div class="css-video">
              <div class="css-height">
                <video class="css-static" playsinline="" webkit-playsinline="true" x5-playsinline="" x5-video-player-type="h5" x5-video-player-fullscreen="true" preload="auto">
                  <source src="http://vjs.zencdn.net/v/oceans.mp4">
                </video>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Looking up some data, it is found that it may be related to the context caused by transform, but after a little modification, it is even more confusing.

There are at least three ways I can make pictures work:

1. Remove the overflow: hidden of the parent (but this is not removable, which is confusing)

#root {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.css-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
}
.css-rotate {
  position: relative;
  width: 211px;
  height: 375px;
  transform: rotate(90deg);
}
.css-pic {
  /* backface-visibility: hidden; */
  position: absolute;
  display: block;
  z-index: 2;
  left: 43.07px;
  top: 175.78px;
  width: 124.8px;
  height: 83.2px;
  /* background: red; */
}
.css-video {
  position: absolute;
  display: block;
  z-index: 1;
  left: 0px;
  top: 0px;
  width: 210.94px;
  height: 375px;
  background: blue;
}
.css-overflow {
  
  position: relative;
  width: 100%;
  height: 100%;
  color: rgb(0, 0, 0);
}
.css-height {
  height: 100%;
}
.css-static {
  position: static;
  width: 100%;
  height: 100%;
}

<html>
  <body>
    <div id="root">
      <div class="css-wrap">
        <div class="css-rotate">
          <div class="css-overflow">
            <div class="css-pic">
              <div class="css-height">
                <img class="css-static" src="https://www.gravatar.com/avatar/43111ebfc98a0b559c4a1dc31b6e39f6?s=32&d=identicon&r=PG">
              </div>
            </div>
            <div class="css-video">
              <div class="css-height">
                <video class="css-static" playsinline="" webkit-playsinline="true" x5-playsinline="" x5-video-player-type="h5" x5-video-player-fullscreen="true" preload="auto">
                  <source src="http://vjs.zencdn.net/v/oceans.mp4">
                </video>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

2. Change the angle of rotate to a small angle such as 0 or 20 (does this mean that it may not be caused by transform?)

#root {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.css-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
}
.css-rotate {
  position: relative;
  width: 211px;
  height: 375px;
  transform: rotate(30deg);
}
.css-pic {
  /* backface-visibility: hidden; */
  position: absolute;
  display: block;
  z-index: 2;
  left: 43.07px;
  top: 175.78px;
  width: 124.8px;
  height: 83.2px;
  /* background: red; */
}
.css-video {
  position: absolute;
  display: block;
  z-index: 1;
  left: 0px;
  top: 0px;
  width: 210.94px;
  height: 375px;
  background: blue;
}
.css-overflow {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  color: rgb(0, 0, 0);
}
.css-height {
  height: 100%;
}
.css-static {
  position: static;
  width: 100%;
  height: 100%;
}

<html>
  <body>
    <div id="root">
      <div class="css-wrap">
        <div class="css-rotate">
          <div class="css-overflow">
            <div class="css-pic">
              <div class="css-height">
                <img class="css-static" src="https://www.gravatar.com/avatar/43111ebfc98a0b559c4a1dc31b6e39f6?s=32&d=identicon&r=PG">
              </div>
            </div>
            <div class="css-video">
              <div class="css-height">
                <video class="css-static" playsinline="" webkit-playsinline="true" x5-playsinline="" x5-video-player-type="h5" x5-video-player-fullscreen="true" preload="auto">
                  <source src="http://vjs.zencdn.net/v/oceans.mp4">
                </video>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

3. If you delete the video element or display: none, you will find that the display level is correct (does that mean the problem lies in the video element)

#root {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.css-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
}
.css-rotate {
  position: relative;
  width: 211px;
  height: 375px;
  transform: rotate(90deg);
}
.css-pic {
  /* backface-visibility: hidden; */
  position: absolute;
  display: block;
  z-index: 2;
  left: 43.07px;
  top: 175.78px;
  width: 124.8px;
  height: 83.2px;
  /* background: red; */
}
.css-video {
  position: absolute;
  display: block;
  z-index: 1;
  left: 0px;
  top: 0px;
  width: 210.94px;
  height: 375px;
  background: blue;
}
.css-overflow {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  color: rgb(0, 0, 0);
}
.css-height {
  height: 100%;
}
.css-static {
  position: static;
  width: 100%;
  height: 100%;
}

<html>
  <body>
    <div id="root">
      <div class="css-wrap">
        <div class="css-rotate">
          <div class="css-overflow">
            <div class="css-pic">
              <div class="css-height">
                <img class="css-static" src="https://www.gravatar.com/avatar/43111ebfc98a0b559c4a1dc31b6e39f6?s=32&d=identicon&r=PG">
              </div>
            </div>
            <div class="css-video">
              <div class="css-height">
                
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

After these three guesses, does the mixed effect of video, absolute and rotate lead to the abnormal performance of 'z-index'?

I hope someone can give me an answer. Thanks.

test your code on Fiferox and you will get your answer because you will not have the same output as in Chrome. This is most likely a bug in Chrome — Temani Afif, Dec 26 '19 at 09:51

score 0 · Answer 1 · answered Dec 26 '19 at 06:02

There you go just set the z-index of video to -1 so that i goes behind all your content and set the above context z-index as per req.

Here is updated snippet

#root {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.css-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
}
.css-rotate {
  position: relative;
  width: 211px;
  height: 375px;
  transform: rotate(90deg);
}
.css-pic {
    position: absolute;
    display: block;
    z-index: 2;
    left: 50%;
    top: 50%;
    width: 124.8px;
    height: 83.2px;
    transform: translate(-50%, -50%);
}
.css-video {
  position: absolute;
  display: block;
  z-index: -1;
  left: 0px;
  top: 0px;
  width: 210.94px;
  height: 375px;
  background: blue;
}
.css-overflow {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  color: rgb(0, 0, 0);
}
.css-height {
  height: 100%;
}
.css-static {
  position: static;
  width: 100%;
  height: 100%;
}

<html>
  <body>
    <div id="root">
      <div class="css-wrap">
        <div class="css-rotate">
          <div class="css-overflow">
            <div class="css-pic">
              <div class="css-height">
                <img class="css-static" src="https://www.gravatar.com/avatar/43111ebfc98a0b559c4a1dc31b6e39f6?s=32&d=identicon&r=PG">
              </div>
            </div>
            <div class="css-video">
              <div class="css-height">
                <video class="css-static" playsinline="" webkit-playsinline="true" x5-playsinline="" x5-video-player-type="h5" x5-video-player-fullscreen="true" preload="auto">
                  <source src="http://vjs.zencdn.net/v/oceans.mp4">
                </video>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

And also i set the image to center of video

thank you for your advice.the zindex -1 can really solve the case.but unfortunate. This demo is simplified from the actual project，zindex for video is not always set to - 1 — Qyellow, Dec 26 '19 at 06:17
In terms of performance, it can be solved. But it can't solve my doubts. What caused this performance — Qyellow, Dec 26 '19 at 06:54
@Qyellow Dear The z-index property specifies the stack order of an element.An element with greater stack order is always in front of an element with a lower stack order.*Note:*z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky).https://teamtreehouse.com/community/how-css-position-absolute-brings-the-overlay-element-to-the-front — Awais, Dec 26 '19 at 07:03
This explanation is a possibility that I have considered. As mentioned above, a small angle of rotate, such as 20 or 40, can display the picture normally. This is where I wonder — Qyellow, Dec 26 '19 at 07:16
@Qyellow Opps i got it here is the answer to your question [Link1](https://stackoverflow.com/questions/50883309/how-come-css-animations-change-z-index), [Link2](https://stackoverflow.com/questions/20851452/z-index-is-canceled-by-setting-transformrotate) , Link 2 will be more precised — Awais, Dec 26 '19 at 07:19
maybe not, i read link2 yestoday, his solution is to rotate at the wrap layer, as I did, and my 3 demo shows if i hidden the video, it shows right — Qyellow, Dec 26 '19 at 08:38

Video z-index transform rotate abnormal behavior

1 Answers1