On an Android 4.3 device, using the default browser, I'm creating an element that uses both -webkit-mask and -webkit-transform: rotate. But when I combine the two styles, the element's background color doesn't get masked correctly.

Here's what it looks like without the rotation (top) and with it (bottom). As you can see, the bottom image doesn't have the background masked:

android

And here's what I'm expecting. This is what I get on Chrome and other browsers:

chrome

The bottom element has the following styles (the full source is here):

background-color: red;
-webkit-mask: center center url('data:image/png;base64,...') no-repeat;
-webkit-mask-size: 2em 3em;
-webkit-transform: rotate(-180deg);

Is this a known issue with the stock Android browser? Any way around it?

Related posts

Recent Viewed