[Webkit-unassigned] [Bug 234731] New: [CSS] input with transform scale and height property ruins vertical text alignment

Tue Dec 28 14:18:49 PST 2021

https://bugs.webkit.org/show_bug.cgi?id=234731

            Bug ID: 234731
           Summary: [CSS] input with transform scale and height property
                    ruins vertical text alignment
           Product: WebKit
           Version: Other
          Hardware: PC
                OS: Linux
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Forms
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: pedropaulosuzuki1 at gmail.com
                CC: cdumez at apple.com, wenson_hsieh at apple.com

Created attachment 448056

  --> https://bugs.webkit.org/attachment.cgi?id=448056&action=review

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.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20211228/d2726702/attachment.htm>