z-index and translate 3d not work the same in chrome and safari

I experience a browser compatible issue and and found it is caused by Google chrome and Safari process z-index and translate 3D differently. I make a minimum example here:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<div>
  <div style="background-color: blue; height: 100px; width: 100px; position: absolute; transform: translate3d(10px, 10px, 10px)"></div>
  <div style="background-color: red; height: 100px; width: 100px; position: relative; z-index: 1"></div>
</div>

<!-- end snippet -->

This short html, display differently in Safari and Google Chrome.

May I know which one is the expect behaviour? How should I correctly use z-index and transform at the same time?

I tried in different browsers and make a minimum example.

Safari work with translate3d property as a layer in the browser too and it has this different display method, so if you put elements with z-index and others with translateZ, translateZ or translate3d will work over z-index elements

So, to avoid issues with safari I would suggest you to use translateY and translateX methods as is shown in comment below, or set translateZ as same you are setting z-index

Here is more about that in Safari: https://bugs.webkit.org/show_bug.cgi?id=61824

Example:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.box {
  height: 100px;
  width: 100px;
}

.blue {
  background-color: blue;
  position: absolute;
  /** this works in safari **/
  transform: translateY(10px) translateX(10px);

  transform: translate3d(10px, 10px, 10px);
}

.red {
  background-color: red;
  position: absolute;
  
  /** this desn't work in safari */
  /** transform: translate3d(0, 0, 9px); */
  
  /** need this to work with safari */
  /** transform: translate3d(0, 0, 11px); */

  z-index: 1;
}

<!-- language: lang-html -->

<div>
  <div class="box blue"></div>
  <div class="box red"></div>
</div>

<!-- end snippet -->