Css в новолуние не работает в сафари

Question

Я получил эту простую форму CSS, которая должна напоминать новолуние, в Chrome и Firefox все выглядит хорошо, но в сафари виден контур всего круга - как я могу заставить эту форму новой луны работать в сафари?

Img -> Текущий результат Safari

.circle {
  height: 50px;
  width: 50px;
  border-left: 10px solid red;
  border-radius: 50%;
}

<div class="circle"></div>

Answer 1

Это похоже на ошибку в том, как webkit обрабатывает частичные границы с установленным border-radius.

Вот метод, использующий box-shadow вместо границ, который я считаю визуально похожим:

.circle-box-shadow {
  height: 50px;
  width: 50px;
  margin-left: 10px;
  box-shadow: -10px 0 0 red;
  border-radius: 50%;
}

.circle-border {
  height: 50px;
  width: 50px;
  border-left: 10px solid red;
  border-radius: 50%;
}

<p>Using <code>box-shadow</code>:</p>
<div class="circle-box-shadow"></div>
<br>
<p>Using <code>border</code>:</p>
<div class="circle-border"></div>

Протестировано в Chrome 70.0.3538.110 и Safari 12.0.1.