Bug 33622 - <SELECT> doesn't properly render with -webkit-gradient
: <SELECT> doesn't properly render with -webkit-gradient
Status: UNCONFIRMED
Product: WebKit
Classification: Unclassified
Component: New Bugs
: 528+ (Nightly build)
: All All
: P2 Normal
Assigned To: Nobody
:
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2010-01-13 13:49 PST by Lindsey Simon
Modified: 2013-12-20 04:05 PST (History)
4 users (show)

See Also:


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 Lindsey Simon 2010-01-13 13:49:32 PST
Created attachment 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 infoeon 2011-08-16 18:49:15 PDT
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 gur.trio 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.