TranslateZ在Firefox56中被破坏了

Question

这里我收集了一些例子，其中有两个框：一个是红色，另一个是蓝色。红色应始终在蓝色前面。

1. 绝对定位的块，彼此叠加：不起作用。
2. 绝对定位的块，红色偏离蓝色：它确实有效！
3. 绝对定位的块，红色偏移蓝色并有一些文字不起作用。
4. 绝对定位的块，红色偏移蓝色并且有一些文本，父级旋转：确实有效！
＆＃13;
＆＃13;
.container {
    display: inline-block;
    position: relative;
    width: 75px;
    height: 150px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    margin: 15px;
}

.rotated {
  transform:rotateY(30deg) rotateX(-30deg);
}

.red,
.blue {
    color: white;
    position: absolute;
    top: 50%;
    width: 100%;
    height: 50%;
}

.red {
    background: red;
    transform: translateZ(30px);
}

.blue {
    background: royalblue;
    transform: translateZ(0px);
}

.moved {
    left: 10%;
}
＆＃13;
<!-- On top of each other -->
<div class="container">
    <div class="red"></div>
    <div class="blue"></div>
</div>
<!-- red moved by non-0 value -->
<div class="container">
    <div class="red moved"></div>
    <div class="blue">Text here doesn't matter</div>
</div>
<!-- text -->
<div class="container">
    <div class="red moved">Text here breaks everything</div>
    <div class="blue"></div>
</div>
<!-- rotation -->
<div class="container rotated">
    <div class="red moved">Text here is ok</div>
    <div class="blue"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

以下是Firefox56中的样子：如例1和3中断。红色应始终在蓝色前面。

<小时/> 在Chrome中，四个示例正确呈现（如在Firefox57和59alpha中）。在Firefox56（以及其他许多人，我猜）他们不会。这是一个可解决的Firefox问题吗？