vbijuteriienrt
New Member
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:\[code\]-webkit-transform: translate3d(0px, 0px, 0px);\[/code\]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), 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? Removing the z-index seems to fix it, but I need that.Here's the source:\[code\]<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>\[/code\]