Bug 67831 - transform: rotate() file input text is either cutoff or invisible
Summary: transform: rotate() file input text is either cutoff or invisible
Status: UNCONFIRMED
Alias: None
Product: WebKit
Classification: Unclassified
Component: New Bugs (show other bugs)
Version: 528+ (Nightly build)
Hardware: Mac (Intel) OS X 10.6
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2011-09-08 20:49 PDT by Vincent Woo
Modified: 2011-09-08 20:49 PDT (History)
0 users

See Also:


Attachments
Reproduces cutoff/invisible file input text (837 bytes, text/html)
2011-09-08 20:49 PDT, Vincent Woo
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Vincent Woo 2011-09-08 20:49:25 PDT
Created attachment 106834 [details]
Reproduces cutoff/invisible file input text

I'm seeing some weird behavior when a file input element is rotated with, for instance, -webkit-transform: rotate(-2deg). It doesn't matter what value degrees are used or if the input itself or the form is rotated.

The file input is normally composed of a "Choose File" button, followed possibly by a mimetype icon in Safari, then some text ("no file selected" or filename). The trouble lies with the last bit of text.

If there is nothing above the rotated element, the file input text is below the baseline and slightly cutoff.

Otherwise, the file input text is invisible. The hitbox seems to be there: clicking in the whitespace where the file input text should be brings up the file open dialog box. Choosing a file here then shows the mimetype icon correctly but still invisible text.

Attached is a html file that showcases the problem. Just 3 rotated forms with a file input each.

Bug reproducible in WebKit-SVN-r94751 built on 08 September 2011.