Bug 79280

Summary: <input type=file> and scale(1) make "No file chosen" label disappear
Product: WebKit Reporter: kyle.wanamaker
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Normal CC: rd+trackBugs, shanestephens, tkent
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: All   
OS: All   
See Also: https://bugs.webkit.org/show_bug.cgi?id=88650
Attachments:
Description Flags
Appearance with and without scale(1)
none
Minimal repro none

Description kyle.wanamaker 2012-02-22 14:48:32 PST
Created attachment 128294 [details]
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;
}
Comment 1 Shane Stephens 2012-02-22 19:48:45 PST
Created attachment 128374 [details]
Minimal repro
Comment 2 Shane Stephens 2012-02-22 19:49:54 PST
Minimal repro attached. Note that as this repro demonstrates the text doesn't disappear, it is just shifted from where it should be and then clipped. The original test case's text was shifted completely outside the bounds of the clipping rectangle, whereas this test case demonstrates text that is only partially shifted out of the rectangle.
Comment 3 Kent Tamura 2012-08-21 00:27:44 PDT

*** This bug has been marked as a duplicate of bug 69248 ***