Android : CSS mask image grradient causing gradient overlay overlay on Android

For boxes with clipped text i used css mask-image with css gradient. It works fine in every supported browser. But on android only the gradient is shown in front of the box. That is a big problem, because it makes the text unreadable. Am I doing something wrong? Because even unsupported css declaration shouldn't do anything like this. And of course this is weird, because the gradient is applied directly on the element with the text - not any element in front of it. So showing the gradient above it seems like a huge bug. But I didn't find any mention of such weird behaviour anywhere.

CSS declaration:

-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(66%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0)));
-webkit-mask-image: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,1) 66%,rgba(0,0,0,0) 100%);
-moz-mask-image: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(0,0,0,1) 66%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(0,0,0,1) 66%,rgba(0,0,0,0) 100%);

PS: Which prefixes are truly needed?