Question

Consider the following CSS for a h2 element:

h2 {
    -webkit-transition-property: -webkit-transform;
    -webkit-transform-origin-x: 0px;
    -webkit-transform-origin-y: 0px;
    -webkit-transition-duration: 0ms;
    -webkit-transform: translate3d(0px, 0px, 0px) scale(1);
    text-shadow: 0 1px 0 #ff00ff;
}

Expectantly, the element should feature a pink text shadow. However, for some reason the -webkit-transform property is causing the text-shadow colour to become destaurated. I have put this into a jsFiddle so you can see what I mean:

With -webkit-transform:
http://jsfiddle.net/Wr5St/

Without -webkit-transform:
http://jsfiddle.net/Wr5St/1/

Does anyone know of a workaround, or what might be causing this? Removing -webkit-transform solves the problem for the shadow, but for obvious reasons isn’t an option for me.

Answer 1

Have you tried specifying the colour as rgba instead?