[Webkit-unassigned] [Bug 79280] New: <input type=file> and scale(1) make "No file chosen" label disappear

[bugzilla-daemon at webkit.org]

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

           Summary: <input type=file> and scale(1) make "No file chosen"
                    label disappear
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: All
        OS/Version: All
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: CSS
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: kyle.wanamaker at gmail.com


Created an attachment (id=128294)
 --> (https://bugs.webkit.org/attachment.cgi?id=128294&action=review)
Appearance with and without scale(1)

I've been experiencing a problem with <input type="file"> HTML elements and using the CSS `transform: scale(1)` effect. When using the `scale` transform the "No file chosen" label on file inputs does not appear in it's normal place. Instead it appears offset down and right, and usually outside of the input element's bounding box, giving it the appearance of being absent. 

I have included the relevant html snippet along with the CSS used to generate the error. 

I have tested in Mac OS X 10.7.3 and Windows 7 Chrome 17.0.963.56 and in Mac OS X 10.7.3 with WebKit nightly Version 5.1.3 (7534.53.10, r108509).

Firefox does not exhibit this error, and the file path appears next to the form control which opens the file dialog. 

I can provide additional screenshots if necessary. 

====== HTML ======

<div class="modal_alert big up" id="anonymous_element_1">
<div class="modal_alert_content" id="anonymous_element_2"> <!-- this element has no associated styling -->
<div class="support_form" id="inline_support_container">
    <input type="file" name="attachments[]" id="attachments_01" accept="image/gif,image/jpeg,image/jpg,image/png">
</div>
<div class="clearfix" style="clear:both;"></div>
</div>
</div>


======== CSS ==============
.modal_alert {
    position:absolute;
    left:50%;
    top:32%;
    z-index:2147483647;
    height:auto;
    width:410px;
    margin-left:-205px;
    padding:20px;
/*    zoom: 0;  */
    opacity:0;
    border: 3px solid #EEF2F9;
    background-color:white;
    color:black;
    font-size:14px;
    line-height:20px;
    text-align:center;
    -webkit-box-shadow: 0 1px 30px rgba(0,0,0,0.85), 0 0 24px rgba(156, 164, 178, 0.42) inset;
    -moz-box-shadow: 0 1px 30px rgba(0,0,0,0.85), 0 0 24px rgba(156, 164, 178, 0.42) inset;
    box-shadow: 0 1px 30px rgba(0,0,0,0.85), 0 0 24px rgba(156, 164, 178, 0.42) inset;
    -webkit-transition: all .25s ease-out; 
    -moz-transition: all .25s ease-out; 
    -o-transition: all .25s ease-out; 
    transition: all .25s ease-out; 
/* This was commented out during testing, but left here, in case it is relevant */
/*    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0); */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
    -webkit-border-radius: 6px;   
    -moz-border-radius: 6px;
    border-radius: 6px;    
}

.modal_alert.big
{
    max-height:610px;
    top:5%;
    width:600px;
    padding: 25px;
    margin-left:-328px;
    text-align: left;
}
/* Commenting or uncommenting this block causes the bug to appear */
.modal_alert.up { 
/*    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); */
    opacity:1;
}

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