Search code examples
csssafariborderradius

is there a Workaround for fixing a Safari bug, that builts artefacts by using border-bottom with complex border-radius

I try to create a handwritten looked underline to input.

With this complex border-radius, Chrome looks great. In Safari, however, these artifacts appear.

I tried to fix it with

-webkit-background-clip: padding-box;

from: https://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed

input {
  border: none;
  border-bottom: 2px solid;
  border-radius: 130px 50px/4px 2px;
}

https://codepen.io/matzR/pen/dybpXgO

Safari: artefacts over the input Safari: artefacts over the input

Solution

  • Safari seems to have some interesting decisions as far as figuring out the border color goes. Try zooming at this, for instance:

    input {
  border: 0.001px solid white;
  border-bottom: 2px solid red;
  border-radius: 130px 50px/4px 2px;
  padding: 10px;
  width: 300px;
}

    very cursed

    I guess the linked workaround doesn't work because the border isn't inside the element?

    But this is OK (codepen):

    input {
  border: 1px solid transparent;
  border-bottom: 2px solid red;
  border-radius: 130px 50px/4px 2px;
  padding: 10px;
  width: 300px;
}
    <input>
    not so cursed

    My other considerations were using a SVG element for background and/or using border-image-slice to simulate the behaviour.