在WebKit中，为什么translate3d会影响投影？

Question

我正在使用一个框架（Sencha Touch），它将以下样式应用于很多元素，可能会在移动设备上加速它们：

-webkit-transform: translate3d(0px, 0px, 0px);

通常，这不会改变元素的显示方式。但我注意到，当一个元素具有这种风格时，它会影响相邻元素的阴影滤镜。在此example（使用适用于Mac的Chrome或适用于iOS的Safari）中，下面的顶部图片位于translate3d元素旁边，而底部图片不是：

有人可以解释为什么会这样，以及是否有办法避免它？只有具有阴影的元素也具有z-index时才会发生这种情况。但我需要保留z-index。

这是来源：

<style>
.top {
    position: absolute;
    z-index: 1;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid blue;
    -webkit-filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.75));
}
.bottom {
    height: 80px;
}
.translated {
    -webkit-transform: translate3d(0px, 0px, 0px);
}
</style>

<div class="top"></div>
<div class="bottom translated"></div>

Answer 1

混合GPU和CPU渲染元素时会出现一些小问题。 （当你指定translate3d时，你给渲染引擎一个很好的理由来使用GPU，这就是使用它的原因） 前段时间，您可以在Canary中看到启用和禁用GPU渲染。 然而，随着你的小提琴，Canary在任何模式下都可以显示。 （27.0.1447.0）

我认为，获得稳定结果的唯一方法是通过GPU进行大部分显示。例如：

.top {
    position: absolute;
    z-index: 1;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid blue;
    -webkit-filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.75));
}
.bottom {
    height: 80px;
}
div {
    -webkit-transform: translate3d(0px, 0px, 0px);
}

updated fiddle

crude, I know, but you get the idea.