Reflection gradients using CSS in android browser

Question

I have some CSS for displaying a reflection on an element which uses -webkit-gradient to fade out:

.foo { -webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.5)), color-stop(0.7, transparent)); }

• On browsers which support -webkit-box-reflect such as chrome, this displays a reflection of the element which gradually fades out as expected.
• On browsers which don't support it at all, no reflection is show.

However, on Android's browser, a reflection is shown, but doesn't fade out.

Is there any way of getting Android to either:

1. fade out the reflection, or
2. not show the reflection at all.

I know I could use javascript to detect the browser and change the style accordingly, but I'd much prefer a CSS-only solution.

Answer 1

Without an example file or link, it is a little difficult to see what you need.

I also played with some reflection stuff a few months ago and didn't find anything that could do what you describe. I have some steps to get you what you want, outside of code. I recommend the item you wish to reflect be a PNG on a transparent background, to start.

The steps: 1.Take the image into your favorite image manipulation program (ex. Photoshop)

1. Double or extend the image canvas the necessary amount to include the reflection in the appropriate direction
2. Duplicate the layer (Photoshop-Layer/Duplicate Layer)
3. Reflect the image. (Photoshop-Layer/Image Rotation/Flip Canvas (your direction))
4. Move the duplicated layer such that it appears as a mirror using the Move tool
5. Select the Marquis tool, and set the edge blur to about 50% of your original image width.
6. Drag your cursor over the "reflected" layer, don't worry if it says the selection lines won't be visible, unless it says nothing was selected. If it says nothing was selected, reduce your edge blur to about 25% and try again.
7. Once you have a selection, be it visible or not, delete the selected area. This should give you a "reflected" look.
8. If desired, add a background on a layer below everything else.
9. Save your image as a jpg if you don't have a transparent background or a png if you do. Use it in place of the image you were reflecting and fading with code. This will be mostly browser compatible.

Answer 2

do gradients work at all in the android browser? if they do, make sure you're using the correct version. There's an old webkit format you may need to use. If not, just use modernizr to hide it on places that don't support gradients.

Answer 3

CSS isn't designed to handle stuff like that. In other words: no, it's not possible.

Answer 4

I'm having similar problems trying to do things with background gradients in the Android browser, and it appears completely unsupported

Unfortunately the above answer is right, there isn't a way to split your declaration up in a nice progressively enhanced way. You could use JavaScript/modernizr as you mentioned, and at least set a support class(es) so you don't actually have to flip the style within code.

You could try reproducing this effect with a HTML canvas element, using drawImage with your image and transforming it. Although canvas can be slow in mobile webkit.

Good luck