WAIT: Search element - border-radius problem only on Apple devices

Bugs
1

Hello,
I’m building my first e-shop in Bricks Builder and I’ve run into a problem that I can’t seem to fix. The search element on all Apple devices sets own border-radius.
I tried different CSS settings but unfortunately it didn’t solve the problem. It helped to set overflow: hidden, the search element keeps a uniform border-radius and it does not jump from 8px to about 100px. But input field is too rounded (border-radius around 100px). Any settings on %root% or input don’t work.

Video with problem: https://www.youtube.com/watch?v=wEIeYk-dP48

Website: https://attavelkoobchod.cz/

2

Hi Tomas,
Thanks so much for your report and welcome to the forum!

Unfortunately, I cannot see nor reproduce the issue on your site using my MacBook, iPhone or iPad Air (Chrome or Safari) :thinking:

Best regards,
timmse

3

Hi,
I don’t see the problem on MacOS. Maybe it doesn’t work only on some version of iOS and iPadOS. I’ve tried several Apple devices on BrowserStack and the problem is showing up. Do you have a chance to check it there? There is 100% a bug.

4

%root% input {
-webkit-appearance: none;
overflow: hidden;
}

This CSS fix the problem.

5

Hi Tomas,
Which iOS version are you using? Probably a relatively old one, right?

The appearance property is used to display an element using a platform-native styling based on the users’ operating system’s theme.

6

I’m using the latest version of iOS (iPadOS).

7

That’s interesting - I do the same on my iPad, and I can’t see any problems :thinking: