Question

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

我正在使用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中查看元素的Box模型时，会得到一个有趣的结果：

元素本身以及元素的border的值分别为~47.99和~0.99，这与我在该主题上知道的所有事实背道而驰：“浏览器的最小单位为测量最终是单个像素（1px）”。

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

所以我的问题：

自从浏览器何时可以渲染小于1px的元素？
为什么此svg忽略了我在Safari中的css声明，而没有像在Chrome和Firefox中那样从元素半径的中心擦除？

修改：

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

Answer 1

因此，除了不解决开发问题之外，更烦人的是解决该问题，而没有任何关于如何/为什么的解释。

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

运行一些隔离测试后，我确定当使用静态代码（在React.js环境之外）时，无法在Safari中重新创建问题。浮点值似乎从React.js环境泄漏到Safari的计算CSS中。

在阳光下尝试了几乎所有其他操作之后，我重新启动了计算机，现在，无论如何都无法在Safari中重新创建问题。

请简单说明一下“您是否尝试过在墙上打开和关闭它？”的重要性。在进行任何其他调查之前；）

我希望可以将我的所有头发拔出后再放回去。

Safari 11.1.2中的<1px边框问题

1 个答案: