| Summary: | <SELECT> doesn't properly render with -webkit-gradient | ||||||
|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Lindsey Simon <lsimon> | ||||
| Component: | New Bugs | Assignee: | Nobody <webkit-unassigned> | ||||
| Status: | RESOLVED CONFIGURATION CHANGED | ||||||
| Severity: | Normal | CC: | ahmad.saleem792, gur.trio, infoeon, priyajeet.hora, simon.fraser | ||||
| Priority: | P2 | ||||||
| Version: | 528+ (Nightly build) | ||||||
| Hardware: | All | ||||||
| OS: | All | ||||||
| Attachments: |
|
||||||
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>
(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. I took attached test and changed to JSFiddle and removed -webkit- and it works same across all browsers (Safari Technology Preview 153, Firefox Nightly 106 and Chrome Canary 107): Link - https://jsfiddle.net/o4fgv7tu/show Further, I took testcase from Comment 01 and changed also into JSFiddle (also removed prefixed lines): Link - https://jsfiddle.net/10ech2wa/show Same result, all browser same. I am marking this as "RESOLVED CONFIGURATION CHANGED". Please reopen if it is reproducible with updated test case. Thanks! |
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)