极客观点
项目管理
HarmonyOS
这两天做开发的过程中出现了一个问题。公司开发用的电脑的 device pixel ratio 是 1.25。
假设如下的HTML和CSS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DPR Issue</title>
</head>
<body>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
</body>
</html>* {
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
}
.tick {
border: 1px solid red;
display: block;
position: relative;
width: 18px;
height: 18px;
margin: 10px auto;
}
.tick::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 12px;
height: 12px;
background: blue;
}想要实现的效果很简单，就是长宽都是18px的.tick的::after伪元素被绝对定位到.tick的左上角（即 top: 0; left: 0;）。
结果，在devicePixelRatio === 1.25 的机器上会出现如下图中的定位问题：
在devicePixelRatio为1的电脑上就不会出现这个情况。
在此向诸位求教该问题出现的原因，以及是否存在任何的方式去解决或避免问题出现？
多谢各位！
没有人遇到同样的问题吗？
目前来看感觉像是浏览器渲染引擎方面的问题。