Bug 33622 - <SELECT> doesn't properly render with -webkit-gradient
: <SELECT> doesn't properly render with -webkit-gradient
Status: UNCONFIRMED
: WebKit
New Bugs
: 528+ (Nightly build)
: All All
: P2 Normal
Assigned To:
:
:
:
:
  Show dependency treegraph
 
Reported: 2010-01-13 13:49 PST by
Modified: 2013-12-20 04:05 PST (History)


Attachments
testcase with gradient on a select (1.17 KB, text/html)
2010-01-13 13:49 PST, Lindsey Simon
no flags Details


Note

You need to log in before you can comment on or make changes to this bug.


Description From 2010-01-13 13:49:32 PST
Created an attachment (id=46499) [details]
testcase with gradient on a select

Both of these notes refer to a <SELECT> with -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#ddd)), testcase file attached.

* In Webkit nightly on a Mac, the background renders simply as solid gray and the 3d look falls off the cliff.
* In Linux Chromium unstable the background colors are quite off, rendering black at the top of the select and grey at the bottom.
(On Windows chromium, the background looks correct)
------- Comment #1 From 2011-08-16 18:49:15 PST -------
Below is a test case.



<!DOCTYPE HTML>
<html>
    <head>
        <style>
            body{
                background-color: yellow;
            }

            * {
                border-color: green;
                color: blue;
            }

            select, input{
                background-color: red;

                background-image: repeating-linear-gradient(45deg, grey, grey 3px, orange 3px, orange 6px);
                background-image: -moz-repeating-linear-gradient(45deg, grey, grey 3px, orange 3px, orange 6px) !important;
                background-image: -webkit-repeating-linear-gradient(45deg, grey, grey 3px, orange 3px, orange 6px) !important;
            }
        </style>
        <title>Test CSS</title>
    </head>
    <body>
        <select name="test1">
            <option selected>I should have a cool gradient.</option>
            <option>Banana Gum</option>
        </select>
        <input type="text" name="test2" value="123">
    </body>
</html>
------- Comment #2 From 2013-12-20 04:05:53 PST -------
(In reply to comment #1)
> Below is a test case.
> 
> 
> 
> <!DOCTYPE HTML>
> <html>
>     <head>
>         <style>
>             body{
>                 background-color: yellow;
>             }
> 
>             * {
>                 border-color: green;
>                 color: blue;
>             }
> 
>             select, input{
>                 background-color: red;
> 
>                 background-image: repeating-linear-gradient(45deg, grey, grey 3px, orange 3px, orange 6px);
>                 background-image: -moz-repeating-linear-gradient(45deg, grey, grey 3px, orange 3px, orange 6px) !important;
>                 background-image: -webkit-repeating-linear-gradient(45deg, grey, grey 3px, orange 3px, orange 6px) !important;
>             }
>         </style>
>         <title>Test CSS</title>
>     </head>
>     <body>
>         <select name="test1">
>             <option selected>I should have a cool gradient.</option>
>             <option>Banana Gum</option>
>         </select>
>         <input type="text" name="test2" value="123">
>     </body>
> </html>


Working fine on chrome Version 31.0.1650.63 and webkit revision 160903.

Please confirm so that we can close this issue.