[Webkit-unassigned] [Bug 40439] New: form controls cause -webkit-box-reflect to incorrectly render -webkit-box-shadow

Thu Jun 10 12:18:48 PDT 2010

https://bugs.webkit.org/show_bug.cgi?id=40439

           Summary: form controls cause -webkit-box-reflect to incorrectly
                    render -webkit-box-shadow
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: Macintosh Intel
        OS/Version: Mac OS X 10.6
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: jgregory at yellowinteractive.com

Created an attachment (id=58400)
 --> (https://bugs.webkit.org/attachment.cgi?id=58400)
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>

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.