Safari 11.1.2 中的 <1px 边框问题答案

【问题标题】：<1px border issue in Safari 11.1.2Safari 11.1.2 中的 <1px 边框问题
【发布时间】：2019-02-10 05:17:45
【问题描述】：

我遇到了一个以前从未见过的奇怪问题。

我正在使用 SVG 为用户头像创建径向擦除 :hover 和 :focus 效果：

我设计/开发的一切都是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 中我没有得到想要的结果：

蓝色 svg 环间歇性地与底层的灰色边框对齐（请注意，它在 Y 轴上被 1px 关闭并暴露了环底部的一部分灰色边框）。

当我在 Safari 中查看元素的盒子模型时，我得到了一个有趣的结果：

元素本身以及元素的border 具有~47.99 和~0.99 的值，这与我所知道的关于该主题的所有事实背道而驰：“浏览器的最小度量单位最终是单个像素(1px)”。

比较 Chrome 或 Firefox 中的盒子模型，我得到了预期的结果：所有整数，遵守我声明的 CSS。

所以我的问题：

什么时候浏览器可以渲染小于1px的元素？
为什么这个 svg 会忽略我在 Safari 中的 css 声明，而不是像在 Chrome 和 Firefox 中那样从元素半径的中心擦除？

编辑：

有趣的是，在使用 Safari 查看此问题时，我无法在我提供的 sn-p 中重新创建问题。但是，其他属性也具有相同的浮点不精度：

【问题讨论】：

标签： html css svg safari pixel

【解决方案1】：

因此，唯一比不解决开发问题更烦人的是，在没有解释如何/为什么的情况下解决它。

随着我的调查，这个问题越来越严重。当我发布问题时，我忽略了我在 React.js 环境中工作，因为我认为这无关紧要（愚蠢的错误）。

在运行了一些隔离测试后，我确定在 Safari 中使用静态代码（在 React.js 环境之外）时无法重现该问题。就好像浮点值从 React.js 环境泄漏到 Safari 的计算 CSS 中一样。

在尝试了几乎所有其他方法之后，我重新启动了我的机器，现在在任何情况下都无法在 Safari 中重现问题。

只是表明询问“您是否尝试过在墙上打开和关闭它？”是多么重要。在进行任何其他调查之前；）

我希望在拔掉头发后能把我所有的头发都放回去。

【讨论】：