Safari incorrect radius display on corners

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Safari incorrect radius display on corners

This topic contains 3 replies, has 2 voices, and was last updated by Ernest Marcinko Ernest Marcinko 6 months, 3 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #35414
    adam-polyaire89
    adam-polyaire89
    Participant

    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?

    Attachments:
    You must be logged in to view attached files.
    #35416
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #35419
    adam-polyaire89
    adam-polyaire89
    Participant

    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

    #35422
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.