Android 2.3 procedural image CSS bug

Android 2.3 browser is not able to cope w/ CSS gradients assigned to -webkit-mask or -webkit-box-reflect properties

by Schepp

HTML

<p><code>-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));</code> does not work in Android 2.x:</p>

<img src="http://placekitten.com/200/300" class="mask-gradient">
    
<p>Using a bitmap like <code>-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAEsCAYAAAACUNnVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAD5JREFUeNpi+A8ETAxAACJowqJYgnQuxWL4JYiQJVYJxTqGPfFvKBj6bzSi6JL4ycySVCweyORSIkEuCyDAAFZNAWO2uvJRAAAAAElFTkSuQmCC);</code> does:</p>

<img src="http://placekitten.com/200/300" class="mask-bitmap">

CSS

body {
    padding: 30px;
    font-family: Arial, Helvetica, sans-serif;
}

p {
    margin: 1em 0;
}

.mask-gradient {
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

.mask-bitmap {
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAEsCAYAAAACUNnVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAD5JREFUeNpi+A8ETAxAACJowqJYgnQuxWL4JYiQJVYJxTqGPfFvKBj6bzSi6JL4ycySVCweyORSIkEuCyDAAFZNAWO2uvJRAAAAAElFTkSuQmCC);}