Bug 234731 - [CSS] input with transform scale and height property ruins vertical text alignment
Summary: [CSS] input with transform scale and height property ruins vertical text alig...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Forms (show other bugs)
Version: Other
Hardware: PC Linux
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-12-28 14:18 PST by Pedro Paulo
Modified: 2022-01-04 14:20 PST (History)
6 users (show)

See Also:


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

Note You need to log in before you can comment on or make changes to this bug.
Description Pedro Paulo 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.
Comment 1 Radar WebKit Bug Importer 2022-01-04 14:19:20 PST
<rdar://problem/87114664>