<1px пограничный вопрос в Safari 11.1.2 - PullRequest
Новая
       14

<1px пограничный вопрос в Safari 11.1.2

0 голосов
/ 05 сентября 2018

Я столкнулся со странной проблемой, которую никогда раньше не видел.

Я работаю с SVG для создания эффекта радиальной очистки :hover и :focus для аватара пользователя:

Working in Chrome

Все, что я спроектировал / разработал, относится к сетке 8px. Ниже моя разметка и CSS. 

/* css */
.avatar {
  position: relative;
  box-sizing: border-box;
  display: block;
  padding: 2px;
  border: 1px solid #c9c9c9;
  border-radius: 100%;
}
.avatar:focus {
  outline: 1px dashed #1c1c1c;
}
.avatar--l {
  width: 48px;
  height: 48px;
}
.avatar__ring {
  position: absolute;
  top: -1px;
  left: -1px;
}
.avatar--l .avatar__ring {
  width: 48px;
  height: 48px;
}
.avatar__ring__stroke {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  stroke: #11a0ad;
  stroke-width: 1;
  fill: none;
  transition: all 500ms ease-in-out;
}
.avatar:hover .avatar__ring__stroke,
.avatar:focus .avatar__ring__stroke{
  stroke-dashoffset: 0;
}
.avatar--l .avatar__ring__stroke {
  stroke-dasharray: 150.72; /* 48 * 3.14 */
  stroke-dashoffset: 150.72; /* 48 * 3.14 */
}
.avatar__img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
}
<a class="avatar avatar--l avatar--error" href="https://www.example.com" title="Lexis Fulco">
  <svg class="avatar__ring" viewBox="0 0 48 48">
    <circle class="avatar__ring__stroke" cx="24" cy="24" r="23.5"></circle>
  </svg>
  <div class="avatar__img" style="background: url('https://api.adorable.io/avatars/178/abott@adorable.png') center center / cover no-repeat, white;"></div>
</a>

Как показывает приведенный выше пример GIF, в некоторых браузерах это работает нормально, в частности Chrome 68.0.3440.106 и Firefox 61.0.2. Однако в Safari 11.1.2 я не получаю желаемого результата:

Not pixel-perfect in Safari

Синее svg-кольцо периодически выравнивается с базовой серой границей (обратите внимание, что оно отключено с помощью 1px на оси Y и обнажает часть серой границы в нижней части кольца).

Когда я смотрю на Box Box Model в Safari, я получаю интересный результат:

Safari box model

Сам элемент, а также border элемента имеют значения ~47.99 и ~0.99, что идет вразрез со всем, что я знаю, чтобы быть правдой по этому вопросу: «Самая маленькая единица измерения браузера - это, в конечном счете, один пиксель (1px)».

Сравните блочные модели в Chrome или Firefox, и я получу ожидаемый результат: все круглые числа, придерживаясь CSS, который я объявил.

Итак, мои вопросы:

  • С каких это пор браузеры могут отображать элементы размером менее 1px?
  • Почему этот svg игнорирует мои объявления css в Safari и не стирает из центра радиуса элемента, как в Chrome и Firefox?

Редактировать

Интересно, что я не могу воссоздать проблему в предоставленном мною фрагменте при просмотре этого вопроса с Safari. Однако другие свойства имеют такую ​​же неточность с плавающей запятой:

Strange subpixel rendering

1 Ответ

0 голосов
/ 06 сентября 2018

Таким образом, единственное, что более раздражает, чем не решает проблему разработки, это решить ее без объяснения того, как / почему.

Эта проблема как бы выросла, когда я исследовал. Когда я опубликовал вопрос, я не упомянул, что работал в среде React.js, так как не думал, что это актуально (глупая ошибка).

После выполнения некоторых тестов изоляции я решил, что не могу воссоздать проблему в Safari при работе со статическим кодом (вне среды React.js). Казалось, что значения с плавающей точкой просачиваются из среды React.js в вычисляемый CSS Safari.

Перепробовав почти все остальное под солнцем, я перезапустил свой компьютер и теперь не могу воссоздать проблему в Safari ни при каких условиях.

Просто показывает, насколько важно спросить: «Вы пытались включить и выключить его на стене?» до проведения любого другого расследования;)

Хотелось бы, чтобы можно было убрать все мои волосы после их вытягивания.

...