I have been attempting to incorporate a reflection effect on a mobile webview application (specifically for Android and iOS using webkit). I followed examples I found on various websites, including Stack Overflow.
"-webkit-box-reflect: below -14px -webkit-gradient(linear, left top, left bottom, from(transparent), to(white));"
On Android, the result looks like this
And on other webkit browsers, it appears like this
As seen on Android, there is no actual reflection; instead, the gradient is applied directly onto the reflected image. It seems to be a masking issue specific to webkit on mobile devices. While I could change the color to something other than white (like green) and reverse the orientation, I require an image as the background rather than just a solid color.
Does anyone have any ideas or suggestions? Most resources I've come across do not mention Android at all or only showcase their work on plain backgrounds...