[Webkit-unassigned] [Bug 245422] REGRESSION (Safari 16): Input placeholder misplaced on revaaa.com

Thu Oct 27 01:42:36 PDT 2022

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

Karl Dubost <karlcow at apple.com> changed:

           What    |Removed                     |Added
----------------------------------------------------------------------------
           Keywords|                            |BrowserCompat
                 CC|                            |akeerthi at apple.com
         Depends on|                            |243966
           See Also|                            |https://bugs.webkit.org/sho
                   |                            |w_bug.cgi?id=245225

Aditya Keerthi <akeerthi at apple.com> changed:

           What    |Removed                     |Added
----------------------------------------------------------------------------
           Keywords|NeedsReduction              |
           Assignee|webkit-unassigned at lists.web |akeerthi at apple.com
                   |kit.org                     |

EWS <ews-feeder at webkit.org> changed:

           What    |Removed                     |Added
----------------------------------------------------------------------------
             Status|NEW                         |RESOLVED
         Resolution|---                         |FIXED

Chris <chris at autohumanate.com> changed:

           What    |Removed                     |Added
----------------------------------------------------------------------------
             Status|RESOLVED                    |REOPENED
                 CC|                            |chris at autohumanate.com
         Resolution|FIXED                       |---

--- Comment #4 from Karl Dubost <karlcow at apple.com> ---
The bottom of the magnifier icon is hidden too. 

The input:

<input
  type="search"
  aria-autocomplete="list"
  aria-labelledby="downshift-0-label"
  autocomplete="off"
  value=""
  id="search"
  placeholder="��  Search RevAAA"
  class=""
/>

The shadow content generated for this input is:

<div pseudo="placeholder">�� Search RevAAA</div>
<div pseudo="-webkit-textfield-decoration-container">
  <div pseudo="-webkit-search-decoration"></div>
  <div><div contenteditable="plaintext-only"></div></div>
  <div
    pseudo="-webkit-search-cancel-button"
    aria-label="cancel"
    role="button"
  ></div>
  <div pseudo="-webkit-list-button" style="display: none !important"></div>
</div>

The 

<div pseudo="placeholder">��  Search RevAAA</div>

has the CSS (defined in the UA stylesheet)

input::placeholder {
white-space: pre;
overflow-wrap: normal;
overflow-x: hidden;
overflow-y: hidden;
line-height: initial;
}

the sibling div 

<div pseudo="-webkit-textfield-decoration-container">…</div>

has the CSS (also defined in the UA stylesheet)

input::-webkit-textfield-decoration-container {
display: flex;
align-items: center;
content: none;
}

It doesn't seem to be a recent regression at least.

Running Autospade
autospade -s -O 252432 at main:254111 at main
gave https://commits.webkit.org/compare/253526@main...253496@main

Probably regressed by: 
https://github.com/WebKit/WebKit/commit/0f760ccf1c9e695d6ecf5d6a215a07adc08dcd7f

--- Comment #5 from Aditya Keerthi <akeerthi at apple.com> ---
Note that placeholder line-height is always set to `initial`, as of https://commits.webkit.org/250414@main. This matches other browsers.

Following that change, we had to update our logic to vertically center the placeholder (https://commits.webkit.org/253500@main). It looks like that falls apart when using 'font-family: Arial', with an emoji in the placeholder.

Reduction:

<head>
<meta charset="UTF-8">
<style>
input {
    font-family: Arial;
}
</style>
</head>
<input placeholder="�� Search">

--- Comment #6 from Aditya Keerthi <akeerthi at apple.com> ---
Pull request: https://github.com/WebKit/WebKit/pull/4772

--- Comment #7 from EWS <ews-feeder at webkit.org> ---
Committed 254962 at main (219edafe86a2): <https://commits.webkit.org/254962@main>

Reviewed commits have been landed. Closing PR #4772 and removing active labels.

--- Comment #8 from Chris <chris at autohumanate.com> ---
The bug is worse in 16.1

Referenced Bugs:

https://bugs.webkit.org/show_bug.cgi?id=243966
[Bug 243966] REGRESSION (250414 at main): Placeholder text is vertically off center on mail.163.com
-- 
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/20221027/c2e2bcc0/attachment.htm>