[adam-polyaire89]

Hi there, please see screen shot from https://www.airtouch.net.au/enquire/. See the right hand corners of the search button. On the right, with Chrome, they are curved/wrapped as they are meant to be, on the left with Safari the corners are going outside of the radius. Can this be fixed with CSS update or have we got a setting wrong?

[Ernest Marcinko]

Hi,

Is this mobile Safari or Desktop safari? I assume it is the mobile version again?
That was a known problem a very long time ago with very old safari browsers, where the background clipped through the container element. It should not happen anymore. I am not sure if there is a way to get around that, as it should not be happening in the first place.

The solution to the old issue was setting an explicit overflow, but the thing is, that it is set already correctly.

Are you zoomed in on the device by any chance? Zooming will break borders.

[adam-polyaire89]

Hi, it is both mobile and desktop. It can be slightly seen not zoomed in. Do I need to syncronise settings between
Search box border
Search input field border
Magnifier-icon border

Currently I just have border settings in Search box border

[Ernest Marcinko]

No, syncing borders will not solve this, it will make it much worse. The pixels “bleeding” through are from an inner item. If I were to suggest a code to set the same border radius on that inner item, it will not match – because it is smaller than the outer container, and will cause a white line across the border on any major browser: https://i.imgur.com/5U9BhJE.png

I found this more recent issue with Safari, I think it might be related.
Based on what they suggest, this will get around the problem:

.probox {
    isolation: isolate;
}

But because this is a Safari bug, the things they suggested are just workaround hacks, so they may not work in all cases.
Please let me know if this actually works or changes anything.

[Author]

Posts