Bug: default theme search button background blends in with icon on mobile

[import-brain]

Describe the bug

The default docs theme search button background blends in with the search icon on mobile.

Reproduction

Go to vitepress.dev or fakerjs.dev on a mobile site

Expected behavior

The icon itself to seem more prominent so that users can more easily tell it’s a search button on first glance- maybe no background at all?

System Info

Apple iPhone 11
Google Chrome

Additional context

No response

Validations

• Check if you're on the latest VitePress version.
• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[brc-dd]

Which Chrome and iOS version are you on (share screenshot of chrome://version)? I'm not able to reproduce this:

[import-brain]

I'm on the iOS 17 beta, that might be why the issue is happening on my phone

[brc-dd]

Ah, yeah. That might be the cause. Can you check internally with Faker team once if this is happening on stable iOS version for anyone?

[import-brain]

Ah, yeah. That might be the cause. Can you check internally with Faker team once if this is happening on stable iOS version for anyone?

Sure, I'll ping them right now

[import-brain]

Hi @brc-dd ,

I checked internally with Faker team and none of them were able to replicate it on Android, iOS stable, and using multiple different browsers.

I just tried again and I can't replicate it either now 👀

I'll keep testing to see if I can get it to pop up again.

[brc-dd]

It might be a glitch actually. We already have this code to make it transparent:

vitepress/src/client/theme-default/components/VPNavBarSearchButton.vue

Line 67 in 063b0e5

background: transparent;

I also overrode the css var in 063b0e5 just to be double sure. Feel free to reopen or ping me in faker/vue discord if it happens again.