Twenty Seventeen: iPad mini, iPhone 5: Search form and button rendering issues

[alex27]

• on iPad mini 2 retina:

• on iPhone 5S:

[Caspie]

-webkit-appearance set to none in the CSS fixes it. Tested on iPhone 5s

[davidakennedy]

Thanks for the patch @Caspie! Your change alters Normalize, the third-party library to reset the CSS. I'd rather not touch that. Twenty Sixteen doesn't have this problem, and the CSS is very similar forms. Could we look at what it's doing and copy that rather than changing Normalize?

[Caspie]

Good point @davidakennedy, thanks! Refreshing the patch and moving the fix under 5.0 Forms styling.

[Caspie]

Moving the code outside Normalize

[davidakennedy]

Remove rounded corners in form inputs on Webkit.

[davidakennedy]

After some investigation with @laurelfulford, it looks like this rule in Twenty Sixteen prevented the issue:

​https://github.com/WordPress/twentysixteen/blob/master/style.css#L647

38396.3.patch​ adds it to Twenty Seventeen and should be less invasive than some of the other approaches.

[karmatosed]

In 38888:

Twenty Seventeen: iPad mini, iPhone 5 search form rendering issues fix

On the these devices, there is an issue with the button rendering for the search form. This resolves that.

Props Caspie, alex27, davidakennedy
Fixes #38396