Double Search Icons Showing on Ipad

[hkp]

Hi Folks,

NOT URGENT

I don’t have an Ipad, but last week I had a chance to check our main site using one, and I noticed there were two search icons (magnifying glasses) showing in the Search Box at the top of the Primary Sidebar.

I checked on F12 “Ipad” options, but it does render double icons on my pc.

I checked the search widget, but it is a stock WP widget with no customization that I can see.  I checked the Weaver Xtreme 6.3.0 Options, but again can see no customization or option selections to explain it.

That said, in my Global Custom CSS I have changed some related colors, but not added anything, as I can see. e.g.:

.search-field {background-color: #FFFFFF;}
.search-field { border: 1px solid #cacaca; }
.widget-area, input, select, textarea { border: 1px solid #cacaca; }
.widget-area, select, textarea {background-color: #FFFFFF; } 

If you have access to an Ipad, could you please have a look see?

From memory the icons were not the same size or had the same vertical or horizontal alignment or size.

Regards and thanks,
Angus

Site: https://www.hiskingdomprophecy.com/

[Weaver]

Seems to be a general problem. I can reproduce the behavior on my ipad and iphone on my test site testing with several browsers.

I don’t know why no one has noticed this before. Does not seem to be the case on Android.

For now, this custom CSS will fix the problem (I think – I can only test on the devices I have):

.is-ios .widget-area .search-submit {display:none;}

This solution works by hiding Weaver’s search icon, leaving the iOS one showing alone.

For whatever reason, iOS and iPadOS (but apparently not macOS) seem to add a search icon automatically.

It is not wrapped in any special class, but seems to be a fixed, built-in “feature”.

As I said, very strange feature. If I can cofirm this mores solidly, I’ll probably add the .is-ios rule the Weaver’s main CSS.

[Weaver]

This reply has been accepted as the best answer.

Apparently, this is a known issue/feature.

The general web standard for the HTML search box seems to show only the words provided by the HTML source, and NOT include a magnifier icon.

So this is how desktop and android browsers work. But for whatever reason, iOS and iPads decided to add the search icon on those devices.

I’ve looked at a couple of other WP themes, and I’d guess most don’t add a search icon, which just then shows the words on the desktop.

I think Weaver versions have had the search icon added to the default search box for a long time.

So, I will put adding the IOS rule to the theme for future releases.

[hkp]

@Weaver

WOW!

Thank you Inspector Clouseau!  👏 👏 👏

I had no idea the rabbit hole was so deep — or so old!

Thank you so very much for your exploration and solution.  I shall be pleased to wait for the update, as and when it arrives.  No need to add more to my CSS customization list for this…

FYI, on another similar legacy issue where the the different mobile operating systems are blurring their differences, I see that Android are now also recognize and use the (deprecated ?) apple-touch-icon.png icon which used to be in the Weaver 1&2 Site Options, but is no longer on Xtreme.

When the apple-touch-icon.png was removed from Weaver Options, I just left the file in place, and was pleasantly surprised recently to see it pop up on my android phone, years and years later, as my “add to home screen” icon.

I shall now close this thread as RESOLVED — and interestingly so — and again extend my thanks for your diligence on this, as always.

Regards and thanks,
Angus

[Author]

Posts