4

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

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

通常，这不会改变元素的显示方式。但是我注意到当一个元素具有这种样式时，它会影响相邻元素上的阴影过滤器。在此示例中（使用 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>
4

1 回答 1

2

混合 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);
}

更新的小提琴

crude, I know, but you get the idea.
于 2013-03-20T19:18:16.040 回答