NEW 234731
[CSS] input with transform scale and height property ruins vertical text alignment 
https://bugs.webkit.org/show_bug.cgi?id=234731
Summary [CSS] input with transform scale and height property ruins vertical text alig...
Pedro Paulo
Reported 2021-12-28 14:18:49 PST
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.
Attachments
Example of input type text with alignment problems after transform/scale (839 bytes, text/html)
2021-12-28 14:18 PST, Pedro Paulo 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2022-01-04 14:19:20 PST
<rdar://problem/87114664>
Note You need to log in before you can comment on or make changes to this bug.