Bug 234731

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:

Keywords:

InRadar

Version:

Other

Hardware:

OS:

Linux

Attachments:

Description	Flags
Example of input type text with alignment problems after transform/scale	none

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.