RESOLVED CONFIGURATION CHANGED40439
form controls cause -webkit-box-reflect to incorrectly render -webkit-box-shadow 
https://bugs.webkit.org/show_bug.cgi?id=40439
Summary form controls cause -webkit-box-reflect to incorrectly render -webkit-box-shadow
John Gregory
Reported 2010-06-10 12:18:48 PDT
Created attachment 58400 [details] Show correct and incorrect rendering An element with a box shadow is reflected with -webkit-box-reflect. It renders correctly until a popup menu is clicked, or text is typed into a form field. Then, the reflection is incorrectly rendered, and remains incorrectly rendered even when focus is no longer on the form element. See illustration.jpg. Reduction: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en"> <head> <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> <title>CSS Effect Bug</title> <style type="text/css"> li { -webkit-border-radius: 12px; -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,.25))); border: 2px solid #ccc; background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(#099), to(#00d0d0)); -webkit-box-shadow: #ccc 5px -4px 16px; height: 24px; list-style-type: none; width: 100px; margin-bottom: 53px; padding: 5px 16px 0; } </style> </head> <body> <ul> <li> <a href="#">Checkout</a> </li> </ul> </div> <form> <select> <option selected="selected" value="0">Option 0</option> <option value="1">Option 1</option> </select> <input /> </form> </div> </body> </html>
Attachments
Show correct and incorrect rendering (23.26 KB, image/jpeg)
2010-06-10 12:18 PDT, John Gregory 		no flags
Details
example html shows bug (1.15 KB, text/html)
2010-06-10 12:19 PDT, John Gregory 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
John Gregory
Comment 1 2010-06-10 12:19:40 PDT
Created attachment 58401 [details] example html shows bug
John Gregory
Comment 2 2010-06-10 12:20:44 PDT
probably related to bug 38079
Simon Fraser (smfr)
Comment 3 2010-10-07 10:48:57 PDT
Funky. May happen because of outline changes.
Ahmad Saleem
Comment 4 2024-03-04 14:35:21 PST
I am unable to reproduce this bug in Safari Technology Preview 189 and the shadow does not have any clipping as shown in reference picture even if I do select another option or keep menu open etc. Marking this as 'RESOLVED CONFIGURATION CHANGED', if it is still reproducible, please reopen with updated steps to reproduce or with new reduction.
Note You need to log in before you can comment on or make changes to this bug.