In WebKit, why does translate3d affect drop-shadow? - css

Question

I'm using a framework (Sencha Touch) which applies the following style to a lot of elements, probably to speed them up on mobile devices:
-webkit-transform: translate3d(0px, 0px, 0px);
Normally, this doesn't change the way the element is displayed. But I've noticed that when an element has this style, it affects the drop-shadow filters on adjacent elements. In this example (using Chrome for Mac or Safari for iOS), the top image below is next to a translate3d element, and the bottom image isn't:
Can someone explain why this is, and whether there's a way to avoid it? It only seems to happen when the element with a shadow also has a z-index. But I need to keep the z-index.
Here's the source:
<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

There are some minor problems when you mix GPU and CPU rendered elements.
(When you specify translate3d you are giving the rendering engine a good reason to use the GPU, that's why it is used)
Some time ago, you could see that in Canary, enabling and disabling GPU rendering.
With your fiddle, however, Canary displays ok in any mode. (27.0.1447.0)
The only way that you can get stable results, I think, is making most of the display thru the GPU. for instance:
.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.