| Summary: | [CSS] input with transform scale and height property ruins vertical text alignment | ||||||
|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Pedro Paulo <pedropaulosuzuki1> | ||||
| Component: | Forms | Assignee: | Nobody <webkit-unassigned> | ||||
| Status: | NEW --- | ||||||
| Severity: | Normal | CC: | cdumez, koivisto, simon.fraser, webkit-bug-importer, wenson_hsieh, zalan | ||||
| Priority: | P2 | Keywords: | InRadar | ||||
| Version: | Other | ||||||
| Hardware: | PC | ||||||
| OS: | Linux | ||||||
| Attachments: |
|
||||||
Created attachment 448056 [details] Example of input type text with alignment problems after transform/scale Hello everyone! Hope y'all doing fine this tuesday! I came to report a bug on input fields (<input type="text">). When they have a defined height (such as `input { height: 30px; }`), and they have a transform/scale property applied (such as `input { transform: scale(1.1); }`), the text vertical alignment gets ruined for some reason, usually being dragged down. When one uses vertical padding (such as `input.padding { padding: 15px 0; }`) and border-box sizing { box-sizing: border-box; }, it goes up instead, as can be seen in the example below (also attached to the bug report). I put placeholders in the examples so that the problem becomes clear faster. NOTE: The bug only happens if the transform is also under a transition. Example: input { transition: transform 100ms ease-in-out; }. Without the transition, everything seems fine. ```html <!DOCTYPE html> <html> <head> <title>[CSS] input with transform scale and height property ruins text alignment.</title> <style> body { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; gap: 20px; } input { width: 300px; height: 30px; transition: transform 100ms ease-in-out; background-color: #eee; border: 0; border-radius: 20px; text-align: center; } input:hover { transform: scale(1.1); } input.padding { padding: 15px 0; box-sizing: border-box; } </style> </head> <body> <input placeholder="Input without padding goes down"> <input class="padding" placeholder="Input with padding goes up"> <input type="search" placeholder="Search is not styled in WebkitGTK (separate issue)"> </body> </html> ```html Tested on GNOME Web 41.3 Flatpak (WebKitGTK 2.34.2) and on a friend's iPhone and both presented the same issue.