Varia(and some child themes): Search Block Border Radius Not Reflecting on Mobile

[ha-un]

Quick summary

On the Exford theme, the border-radius on the Search Block doesn't reflect the setting set in Gutenberg.

border-radius

Steps to reproduce

1. Create a new site
2. Activate the Exford theme
3. Insert the Search block on a page
4. Change the border-radius to 0
5. View site on mobile (does not reproduce when using Google Chrome device toolbar)

What you expected to happen

The search bar should look like this:

What actually happened

What the search bar looks like on a mobile device:

Context

Report from: 36733515-hc

Tested on both simple & atomic, and issue does not reproduce when switching the theme to Twenty Twenty Two or others.the

Platform (Simple, Atomic, or both?)

Simple, Atomic

Theme-specific issue?

Exford

Browser, operating system and other notes

Chrome & Safari app on mobile devices. Was not able to reproduce using Chrome device toolbar.

Reproducibility

Consistent

Severity

One

Available workarounds?

No but the platform is still usable

Workaround details

No response

[Gustavo-Hilario]

I have been testing this issue, but I could only reproduce it on Simple sites, maybe because my test AT sites aren't new. After further investigation, I noticed the CSS and -webkit-appearance property is causing this issue on the WebKit browser engine. The code comes from the theme's style.css file.

So, the CSS below should fix that:

[type="search"] {
    -webkit-appearance: none;
}

[Robertght]

📌 HOUSEKEEPING

• Labels ✅
• Priority ✅
• Replicable on Core - No

📌 SCRUBBING

• Tested on Simple ✅
• Tested on AT ✅
• Tested on Self-hosted ✅

📌 FINDINGS/SCREENSHOTS/VIDEO

• I can replicate this with Varia, Rockfield, Hever, Alves, Maywood and Exford, but not with Shoreditch for example.
• This doesn't occur on self-hosted

📌 ACTIONS

• Marked as Themes
• Added to 'Themes' project board
• Transferred to XYZ external repo: https://github.com/Automattic/themes/issues/6516