我遇到了一个以前从未见过的奇怪问题。
我正在与SVG合作,在用户头像上创建径向擦除:hover:focus效果:
html - Safari 11.1.2中<1px边框问题-LMLPHP
我设计/开发的所有东西都是一个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中,我没有得到期望的结果:
html - Safari 11.1.2中&lt;1px边框问题-LMLPHP
蓝色SVG环间歇地与下一个灰色边界对齐(注意它在Y轴上偏离1px,并在环的底部暴露一部分灰色边框)。
当我在Safari中查看元素的Box模型时,得到了一个有趣的结果:
html - Safari 11.1.2中&lt;1px边框问题-LMLPHP
元素本身以及元素的border都有~47.99~0.99的值,这与我所知道的“浏览器的最小度量单位最终是单个像素(1px)”这一主题中的所有内容都不符。
比较Chrome或Firefox中的box模型,我得到了预期的结果:所有的整数都符合我声明的CSS。
所以我的问题是:
浏览器何时可以呈现小于1px的元素?
为什么这个svg忽略了Safari中的css声明,而不是像Chrome和Firefox那样从元素半径的中心抹去?
编辑:
有趣的是,当我用Safari查看这个问题时,我无法在我提供的代码片段中重新创建这个问题。但是,其他属性也具有相同的浮点不精确性:
html - Safari 11.1.2中&lt;1px边框问题-LMLPHP

最佳答案

因此,唯一比不解决一个开发问题更烦人的事情是,在没有解释如何/为什么的情况下解决它。
当我调查的时候,这个问题有点严重了。当我发布这个问题时,我忽略了我是在React.js环境中工作的,因为我认为它不相关(愚蠢的错误)。
在运行了一些隔离测试之后,我确定在使用静态代码(在React.js环境之外)时无法在Safari中重新创建问题。这几乎就像浮点值从React.js环境泄漏到Safari的计算CSS中一样。
在阳光下尝试了几乎所有其他的事情之后,我重新启动了我的机器,现在,在任何情况下都无法在Safari中重现这个问题。
只是想说明问“你是否试过在墙上打开或关闭它”有多重要在进行任何其他调查之前;)
我真希望能把我的头发拔出来后再把它们放回去。

10-07 19:06
查看更多