我遇到过一个我从未见过的奇怪问题。
我正在使用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/[email protected]') 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
?编辑:
有趣的是,在使用Safari查看此问题时,我无法在我提供的代码段中重新创建该问题。但是,其他属性也具有相同的浮点不精确度:
因此,唯一比解决开发问题更烦人的事情就是在没有解释如何/为什么的情况下解决问题。
这个问题在我调查时有所增长。当我发布问题时,我忽略了我在React.js环境中工作,因为我认为它不相关(愚蠢的错误)。
运行一些隔离测试后,我确定在使用静态代码(在React.js环境之外)时,我无法在Safari中重新创建该问题。几乎就像浮点值从React.js环境泄漏到Safari的计算CSS一样。
在阳光下尝试了几乎所有其他东西后,我重新启动了我的机器,现在,在任何情况下都无法在Safari中重新创建问题。
只是去表明问“你是否试过在墙上打开和关闭它?”是多么重要?在进行任何其他调查之前;)
我希望把它拉出来之后把所有的头发都放回去。