Is there a clear way of setting the context of a Z-index inside nested transformations

Question

I am currently working on a project that has div with a background image sliding in using a transform: translate. This div has a z-index of zero while some other sibling elements have a higher z-index to ensure they are placed on top. This seems to work fine in my landscape version. However, as this use case only has a landscape version, I am also implementing a transform: rotate when in portrait mode to ensure landscape viewing. When viewing in portrait, the background image slides in above everything, then relocates to the back. Not breaking, but sloppy, as this should be rotated anyways. However, after deployment, I was informed that there have been two instances of the image never relocating to its 0 Z-index home and breaking the usage. I have looked at https://katydecorah.com/code/z-index-and-transform/ and z-index is canceled by setting transform(rotate) and am still not sure how to approach this. The issue only seems to occur in Safari while applying the rotate.

Rough outline of HTML elements:

    <div id="root">
      <div class="App ">
        <div class="mainView">
          <div class="navBar"></div>
          <div class="mainContent">
            <div class="arrowWrapper">
              <div class="arrow slideInItem"></div>
            </div>
            <div class="alphaView">
          </div>
          <div class="footerBar"></div>
        </div>
      </div>
    </div>

Some of the relevant CSS:

    .App {
      text-align: center;
      height: 100%;
      width:100%;
    }
    .mainView{
      height: 100%;
      width: 100%;
      background-color: #fff;
      overflow:hidden;
      position: relative;
      transform-style: preserve-3d;
     }
     .navBar{
       height: 79px;
       width: 100%;
       display:flex;
       flex-direction: row;
       align-items: center;
       background-color: #fff;
     }
     .mainContent{
       display:flex;
       flex-direction:column;
       justify-content:flex-end;
       margin-top: 18px;
       height:85.25%
     }
     .arrow{
       position: absolute;
       z-index: 0;
       top: 0;
       width: 100%;
       height: 100%;
       background-size: contain;
       background-image: url("../images/Page_background_Arrow.png");
       background-repeat: no-repeat;
     }
    .arrowWrapper{
      transform-style: preserve-3d;
      position: absolute;
      z-index: 0;
      top: 97px;
      width: 100%;
      height: 86%;
    }
    .alphaView{
      display: flex;
      height: 100%;
      width: 100%;
      overflow:hidden;
      position: relative;
      z-index: 10;
     justify-content: space-around;
   }
   .footerBar{
     z-index: 999;
     position:fixed;
     top:auto;
     display:flex;
     bottom:0;
     height: 6.15%;
     width:100%;
     flex-direction:row;
     align-items:center
   }
    /* portrait lock */
    @media only screen and (min-width: 100px) and (orientation: 
     portrait) {
    #root {
      transform: rotate(-90deg);
      transform-origin: left top;
      height: 100vw;
      width: 100vh;
      overflow: hidden;
      position: absolute;
      top: 100%;
      left: 0;
    }
  }

Thank you

score 1 · Accepted Answer · edited Jun 08 '21 at 21:48

1

Try setting a -1 index to the background image.

This is a very good article for z-index too What the heck, z-index??

edited Jun 08 '21 at 21:48

cigien

57,834
11
73
112

answered Jun 08 '21 at 21:43

Morten

84
1
5

Well, I feel dumb, I figured 0 is less than ten, so being even less wouldn't matter. I kept convincing myself that it was about the context of the CSS animation. Simple solution, thank you. – Jeffrey Bentley Jun 08 '21 at 23:17

Is there a clear way of setting the context of a Z-index inside nested transformations

1 Answers1