Bug 33622

Summary: <SELECT> doesn't properly render with -webkit-gradient
Product: WebKit Reporter: Lindsey Simon <lsimon>
Component: New BugsAssignee: 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:
Description Flags
testcase with gradient on a select none

Lindsey Simon
Reported 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)
Attachments
testcase with gradient on a select (1.17 KB, text/html)
2010-01-13 13:49 PST, Lindsey Simon 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
infoeon
Comment 1 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>
gur.trio
Comment 2 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.
Ahmad Saleem
Comment 3 2022-09-17 03:30:00 PDT
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!
Note You need to log in before you can comment on or make changes to this bug.