4

The gradient property does not work ok on my android's dolphin browser, version 9.0.1. Here is the css:

position: absolute;
    top: 0;
    left: 0;
    width: 320px;
    height: 60px;

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(left, rgba(255,255,255,0) 66px, #171000 172px);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(17, 10, 0, 0)), color-stop(1, #171000));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(left,  rgba(17, 10, 0, 0) 66px, #171000 172px);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to right, rgba(17, 10, 0, 0) 66px, #171000 172px);

Do I have to add another rule for this browser? As far as i know it uses webkit, i don't understand why it doesn't work.

55651909-089b-4e04-9408-47c5bf
  • 1,134
  • 5
  • 14
  • 31

2 Answers2

2

EITHER

change color-stop(0, rgba(17, 10, 0, 0)), color-stop(1, #171000) to

background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #a7cfdf), color-stop(100%, #23538a));

OR (if the above solution doesn't help then you may try it)

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#8C8C8C));
background: -webkit-linear-gradient(bottom, #8C8C8C,#FFFFFF );
RbG
  • 3,181
  • 3
  • 32
  • 43
1

Might be caused by the mixing of color formats (rgba and hex).
Try using:

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(17, 10, 0, 0)), color-stop(100%, rgba(23, 16, 0, 1)));

or

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(17, 10, 0, 0)), color-stop(100%, rgba(17, 10, 0, 1)));

Take in account that rgb(17, 10, 0) is different from #171000

Álvaro Martínez
  • 1,047
  • 7
  • 10
  • Thanks for your answer but I cannot test this anymore since that project it's dead already :) (The question was asked 9 months ago) Maby it will help someone though – 55651909-089b-4e04-9408-47c5bf Sep 05 '13 at 09:01
  • I tried it and unfortunately it did not work for me. I tried hsl(), rgb() and #xxxxxx, it doesn’t seem to like any gradients at all. It does seem to support all three color syntaxes for a plain background-color though. – Timwi Sep 05 '13 at 09:29