Bug 254459 - input with width:0 doesn't hide the file chooser button
Summary: input with width:0 doesn't hide the file chooser button
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Forms (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2023-03-25 03:34 PDT by Sam Sneddon [:gsnedders]
Modified: 2023-07-28 10:22 PDT (History)
5 users (show)

See Also:

Attachments
screenshot from STP 165 (162.01 KB, image/png)
2023-03-25 03:34 PDT, Sam Sneddon [:gsnedders] 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Sam Sneddon [:gsnedders] 2023-03-25 03:34:36 PDT 
Created attachment 465587 [details]
screenshot from STP 165

1. Upload PDF to https://www.deepl.com/translator/files
2. Wait for it to translate and offer download
3. A new download field appears, looking broken

Looks like it has a button trying to be drawn over an input, and this isn't working nicely in Safari.
Comment 1 Radar WebKit Bug Importer 2023-03-26 18:26:22 PDT 
<rdar://problem/107248208>
Comment 2 Karl Dubost 2023-03-26 18:26:36 PDT 
This looks very similar to Bug 253463 at first sight.
The technique in Bug 253463 was to used negative `text-indent` for making the button disappear.

In this case they use… `width: 0`

https://codepen.io/webcompat/pen/QWVYJER

OR 
data:text/html,<input%20type=file%20style="width:0">

It's very similar.
Comment 3 Aditya Keerthi 2023-03-27 14:21:06 PDT 
Could be the result of some custom logic in `RenderFileUploadControl`...
Comment 4 Aditya Keerthi 2023-03-27 14:22:20 PDT 
Note that the button is in the UA shadow tree, and has non-zero width.