234731 2021-12-28 14:18:49 -0800 [CSS] input with transform scale and height property ruins vertical text alignment 2022-01-04 14:20:24 -0800 1 1 1 Unclassified WebKit Forms Other PC Linux NEW InRadar P2 Normal --- 1 pedropaulosuzuki1 webkit-unassigned cdumez koivisto simon.fraser webkit-bug-importer wenson_hsieh zalan oldest_to_newest 1827124 0 448056 pedropaulosuzuki1 2021-12-28 14:18:49 -0800 Created attachment 448056 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. 1828095 1 webkit-bug-importer 2022-01-04 14:19:20 -0800 <rdar://problem/87114664> 448056 2021-12-28 14:18:49 -0800 2021-12-28 14:18:49 -0800 Example of input type text with alignment problems after transform/scale [CSS] input with transform scale and height property ruins text alignment.html text/html 839 pedropaulosuzuki1 PCFET0NUWVBFIGh0bWw+CjxodG1sPgoJPGhlYWQ+CgkgICAgPHRpdGxlPltDU1NdIGlucHV0IHdp dGggdHJhbnNmb3JtIHNjYWxlIGFuZCBoZWlnaHQgcHJvcGVydHkgcnVpbnMgdGV4dCBhbGlnbm1l bnQuPC90aXRsZT4KCQk8c3R5bGU+CgkJCWJvZHkgewoJCQkJd2lkdGg6IDEwMHZ3OwoJCQkJaGVp Z2h0OiAxMDB2aDsKCQkJCWRpc3BsYXk6IGZsZXg7CgkJCQlhbGlnbi1pdGVtczogY2VudGVyOwoJ CQkJanVzdGlmeS1jb250ZW50OiBjZW50ZXI7CgkJCQlnYXA6IDIwcHg7CgkJCX0KCQkJCgkJCWlu cHV0IHsKCQkJCXdpZHRoOiAyNTBweDsKCQkJCWhlaWdodDogMzBweDsKCQkJCXRyYW5zaXRpb246 IHRyYW5zZm9ybSAxMDBtcyBlYXNlLWluLW91dDsKCQkJCWJhY2tncm91bmQtY29sb3I6ICNlZWU7 CgkJCQlib3JkZXI6IDA7CgkJCQlib3JkZXItcmFkaXVzOiAyMHB4OwoJCQkJdGV4dC1hbGlnbjog Y2VudGVyOwoJCQl9CgkJCQoJCQlpbnB1dDpob3ZlciB7CgkJCQl0cmFuc2Zvcm06IHNjYWxlKDEu MSk7CgkJCX0KCQkJCgkJCWlucHV0LnBhZGRpbmcgewoJCQkJcGFkZGluZzogMTVweCAwOwoJCQkJ Ym94LXNpemluZzogYm9yZGVyLWJveDsKCQkJfQoJCTwvc3R5bGU+Cgk8L2hlYWQ+Cgk8Ym9keT4K CQk8aW5wdXQgcGxhY2Vob2xkZXI9IklucHV0IHdpdGhvdXQgcGFkZGluZyBnb2VzIGRvd24iPgoJ CTxpbnB1dCBjbGFzcz0icGFkZGluZyIgcGxhY2Vob2xkZXI9IklucHV0IHdpdGggcGFkZGluZyBn b2VzIHVwIj4KCQk8aW5wdXQgdHlwZT0ic2VhcmNoIiBwbGFjZWhvbGRlcj0iU2VhcmNoIGlzIG5v dCBzdHlsZWQgaW4gV2Via2l0R1RLIj4KCTwvYm9keT4KPC9odG1sPgo=