Bug 40439

Summary:

form controls cause -webkit-box-reflect to incorrectly render -webkit-box-shadow

Product:

WebKit

Reporter:

John Gregory <jgregory>

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED CONFIGURATION CHANGED

Severity:

Normal

CC:

ahmad.saleem792, simon.fraser

Priority:

Version:

528+ (Nightly build)

Hardware:

Mac (Intel)

OS:

OS X 10.6

Attachments:

Description	Flags
Show correct and incorrect rendering	none
example html shows bug	none

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.