Search clear 'x' icon missing on ios Apple

General
1

Description:

This was actually an issue we been experience for a while but I always forget to bring it up.

We have a website that is using the search input filter, and it works great.
So the search input filter, whenever you typed something in the input, the x icon will appear for users to clear whatever they typed.

This x icon shows across different browser and devices, only when we try this on an Apple iPhone with Safari browser and the x icon is missing.

Please check screenshot as what I’m mentioning.

Pretty sure this is a bug and I don’t know how we can implement a fix on our own to make the x icon not missing on iPhone safari environment.

Insert Images, Videos or GIFs
87ae8581078cb3fe3dc1e7ade6420452

Environment info

  • WordPress version: latest version
  • Cwicly Plugin version: latest version
2

Hi @lukelee,

Sorry to hear you’re experiencing trouble with this.

I want to clarify that the issue you’re facing is a specific bug related to Safari on iOS
It is a known bug with Safari, and out of our control.

However, I came across this thread that provided the following workaround:

input[type="search"]::-webkit-search-cancel-button {

  /* Remove default */
  -webkit-appearance: none;

  /* Now your own custom styles */
   height: 14px;
   width: 14px;
   display: block;
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAn0lEQVR42u3UMQrDMBBEUZ9WfQqDmm22EaTyjRMHAlM5K+Y7lb0wnUZPIKHlnutOa+25Z4D++MRBX98MD1V/trSppLKHqj9TTBWKcoUqffbUcbBBEhTjBOV4ja4l4OIAZThEOV6jHO8ARXD+gPPvKMABinGOrnu6gTNUawrcQKNCAQ7QeTxORzle3+sDfjJpPCqhJh7GixZq4rHcc9l5A9qZ+WeBhgEuAAAAAElFTkSuQmCC);
  /* setup all the background tweaks for our custom icon */
  background-repeat: no-repeat;

  /* icon size */
  background-size: 14px;

}

I have tested this on iOS 16, and it seems to provide a nice fix to this.

Thanks for your understanding.
Moving to General.

1 Like
3

Hi @Araminta

Thank you very much for a solution here. I will test this around and let you know if it works in our case.

4

@Araminta confirmed this solution works like a champ, thank you very much for the solution, definitely learned something new today!

1 Like