Open Radar

 
Original Entry, Nov 6, 21 8:16pm
On my website, ontovictorypress.com, I have a search field that should have a transparent background. Click on magnifying glass in header to see. However, on my phone (iPhone 13 Pro Max, iOS 15.1) the background on the <input type=“search”> is white and no matter how specific I make my CSS, I can’t seem to change that to transparent). 

One of my friends told me it looked fine on her device, so I began to investigate. I took a survey of friends with various devices and iOS versions (results to follow) and concluded that there is a bug somehow in iOS that is preventing background-color from overrulling default background-color on search fields. Or something like that. I haven’t investigated yet beyond my own website. Here are the results from my survey. I think you will see the pattern.

iPhone 13 Pro Max (iOS 15.1)— Error
iPhone 13 Pro Max (iOS 15.2)—Error
iPhone 12 Pro Max (iOS 15.1) — Error
iPhone 12 Pro (iOS 14.8) — Perfect
iPhone 11 (iOS 14.7.1) — Perfect
iPhone XS (iOS 15.1) — Error
iPhone XR (iOS 15) — Perfect
iPhone XR (iOS 14.8) — Perfect
iPhone X (iOS 14.6) — Perfect
iPhone 8 (iOS 14.6) — Perfect
iPhone SE (iOS 15.1) — Error
iPhone SE (iOS 14.4.2) Perfect

Judging from the survey, the field is displaying incorrectly only on devices running iOS 15.1 or later. 

For simplicity’s sake, I will include two screenshots: 1) one of what the search field is supposed to render as (renders correctly on every iOS version prior to 15.1) and 2) the second will be what it looks like on 15.1 and 15.2, which is rendering incorrect (beta 1).

Update, Nov 6, 21 8:33pm
I’ve confirmed the background-color issue is not isolated to my website. See this codepen (https://codepen.io/bobbybosler/pen/dyzmKMj) and please test on various version of iOS to see the difference.