Search field strange formatting behaviour iOS Safari

[Liam J]

Liam J

June 22, 2017 at 5:52 pm

Hi again

Sorry to post again so soon after my last query but I have noticed some strange behaviour when viewing my test site on iOS devices:

The Search field randomly displays with rounded ends, rather than as a straight-edged rectangle. I’m afraid that I haven’t had time to try and work out whether or not this behaviour is caused by specific situations, but it seems quite random. I think that changing screen orientation sometimes causes the issue to occur. Also, tapping in and out of the Search field briefly shows the curved ends.

If you could look into this and see if you can replicate the problem I would be grateful.

I have placed the Search field as the top widget in the sidebar, which I have on the right. I have also made the following amendments to the styling of the Search field, using the Custom CSS tab in Theme Options to remove change the background colour, remove the box shadow, change the font colour, and thin the border:

input[type=”number”], input[type=”search”], input[type=”text”], input[type=”email”], input[type=”password”], input[type=”url”], input[type=”tel”], select, textarea {
background-color: rgba(0,0,0,0);
color: #444;
box-shadow: none;
border: 1px solid rgba(0,0,0,.0980392);
}

input[type=”number”]:focus, input[type=”search”]:focus, input[type=”text”]:focus, input[type=”email”]:focus, input[type=”password”]:focus, input[type=”url”]:focus, input[type=”tel”]:focus, select:focus, textarea:focus {
background-color: rgba(0,0,0,0);
color: #444;
box-shadow: none;
border: 1px solid rgba(0,0,0,.0980392);
}

Many thanks again

Miranda