Bug 231503 - REGRESSION (r282451): [iOS] Cannot override background of search inputs with 'appearance: textfield'
Summary: REGRESSION (r282451): [iOS] Cannot override background of search inputs with ...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Forms (show other bugs)
Version: Other
Hardware: iPhone / iPad Unspecified
: P2 Normal
Assignee: Aditya Keerthi
URL:
Keywords: InRadar
: 233180 (view as bug list)
Depends on:
Blocks:
 
Reported: 2021-10-11 02:08 PDT by David Gölzhäuser
Modified: 2021-11-16 11:22 PST (History)
13 users (show)

See Also:


Attachments
Patch (6.11 KB, patch)
2021-10-27 15:35 PDT, Aditya Keerthi
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description David Gölzhäuser 2021-10-11 02:08:25 PDT
Our application uses Transparent <input> elements, starting iOS 15.1 setting the background-color to transparent in the unfocused state will result in a white background color
Comment 1 Radar WebKit Bug Importer 2021-10-11 12:20:47 PDT
<rdar://problem/84110684>
Comment 2 Alexey Proskuryakov 2021-10-11 12:20:57 PDT
Could you please provide a complete test case?
Comment 3 David Gölzhäuser 2021-10-27 00:16:00 PDT
Just head over to our Demo Miniserver http://demominiserver.loxone.us:7785 and login with user "web" and password "web".

After everything is loaded you can simply open the search bar (upper right corner). You may need to lose focus by clicking on the black background down below.

No worries, this is not a real house, so you can basically click everywhere:)
Comment 4 Aditya Keerthi 2021-10-27 11:21:07 PDT
Thank you for the test case. I can reproduce the issue.

The behavior you’re seeing is specific to <input type=search> with -webkit-appearance: textfield (which is specified in misc.css). In iOS 15, this combination yields a background color matching the default background color of <input type=text> (white). This was done so that pages which didn’t specify a background color for an <input type=search> (which has a new default background color in iOS 15), but wanted to retain the standard textfield appearance, would be able to do so. However, it appears that the change also limited styleability for that combination.

The issue does not reproduce when the search field is focused, due the following rule:

body.dark-mode :focus {
	-webkit-appearance: none;
	outline: 0;
}

Which drops the <input type=search> / -webkit-appearance: textfield condition leading to the white background.

I’m looking into a fix to restore the original behavior. In the meantime, you should be able to use one the following workarounds:

1. Use <input type=text> instead of <input type=search>
2. Specify `-webkit-appearance: none;` on the search input in misc.css (instead of `textfield`)
Comment 5 Aditya Keerthi 2021-10-27 15:35:16 PDT
Created attachment 442639 [details]
Patch
Comment 6 EWS 2021-10-28 09:15:13 PDT
Committed r284984 (243631@main): <https://commits.webkit.org/243631@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 442639 [details].
Comment 7 Aditya Keerthi 2021-11-16 11:22:22 PST
*** Bug 233180 has been marked as a duplicate of this bug. ***