White Bubble appearing over ajax search pro Ios 15.1

[adam-polyaire89]

Hi, we’ve found with the latest ios 15.1 that the autofill created a big white overlay on the search field for ajax search pro. See attached video. Is there a setting we can change to stop this from happening? Or do we need to redesign the form to just be white? See attached screen shot and video. Looking forward to hearing from you.

[Ernest Marcinko]

Hi,

I tried to check directly on your website again, but currently the search is changed to a white background one.
We tried on your site with the same search theme, but it does not appear: https://youtu.be/w3Va584j3rQ
There is a blink of the input focus for a second, I guess that is some kind of an IOS 15 feature to signal the input, but it’s all right. It is definitely not coming from the search itself.
I assume Apple made yet again something unusual, it is not the first time we are dealing with random issues only affecting some special cases. If you go to this URL, does the red search bar have the same issue on your end: https://ajaxsearchpro.com/isotopic-layout/

[adam-polyaire89]

Hi Ernest
Please see screen shot taken on ios 15.1 of your site, showing same issue. The photo shows the same issue in chrome on a laptop next to the phone.

[Ernest Marcinko]

Thank you very much, so this is actually something to do with that specific IOS version. I assume there must be a some sort of a difference between the version I am testing on, even though it says 15.1, maybe something to do with the locale.

Sorry to bother you with this, but can you please try these two input fields on this test page: https://wp-dreams.com/test/test.html
Does the issue appear on any of them?

[adam-polyaire89]

Hi Ernest
Sure, please see attached. The First Input test has the issue, the second input test does not have the issue.

[Ernest Marcinko]

Oh wow, that is fantastic. I know the solution then. Looks like this bug extends to text inputs, or other inputs appearing as text inputs.

With this custom CSS you can get rid off the problem:

div.asp_w.asp_m .proinput input[type=search].orig {
    -webkit-appearance: searchfield !important;
}

Clearing all caches after adding this should resolve the problem immediately. I will of course incorporate this solution to the upcoming release. Hopefully apple will fix the actual bug by then as well.

[adam-polyaire89]

Thank you, does this need to be entered in the plugin custom CSS? I will be able to try this on my site monday.

[Ernest Marcinko]

You can use any custom CSS input field. The plugin custom CSS field is fine too.

[Author]

Posts