rotatey() element overlaps elements on superior z-index, safari

Question

In safari (osx and ios) an element that is transformed using rotatey() seems to climb z-indexes on its rotation, overlapping other elements that are on superior z-indexes.

The attached snippet renders as follows on chrome and firefox:

...and as follows on safari (osx and ios):

What I want is chrome and firefox's behaviour in Safari, how to achieve this?

Thank you

.container {
  width: 100%;
  height: 100%;
  position: relative;
  perspective: 2000px;
}

.container>div {
  position: absolute;
  top: 0;
  left: 0;
}

.upper {
  z-index: 3;
  width: 300px;
  height: 200px;
  background: blue;
}

.rotating {
  z-index: 2;
  width: 200px;
  height: 300px;
  background: red;
  transform: rotatey(-40deg);
}

.lower {
  z-index: 1;
  width: 100px;
  height: 400px;
  background: green;
 }

<div class="container">
  <div class="upper">
  </div>
  <div class="rotating">
  </div>
  <div class="lower">
  </div>
</div>

Answer 1

Although why this happens is still unknown to me, wrapping the rotating element in its own 3d scene (element with perspective) is enough to isolate it from the other divs and stop it from interacting during rotation. Of course that element needs its z-index defined aswell:

.container {
  width: 100%;
  height: 100%;
  position: relative;
}

.container>div {
  position: absolute;
  top: 0;
  left: 0;
}

.upper {
  z-index: 3;
  width: 300px;
  height: 200px;
  background: blue;
}

.wrapper {
  perspective: 2000px;  
  z-index: 2;
}

.rotating {
  width: 200px;
  height: 300px;
  background: red;
  transform: rotatey(-40deg);
}

.lower {
  z-index: 1;
  width: 100px;
  height: 400px;
  background: green;
 }

<div class="container">
  <div class="upper">
  </div>
  <div class="wrapper">
    <div class="rotating">
    </div>
  </div>
  <div class="lower">
  </div>
</div>