安卓webview中伪元素存在边距问题

Question

问题描述

在开发一个弹框的UI过程中，因为不想引入图片了，就用css来写这个标题框。左右两侧有一个小三角形，于是采用before和after伪元素利用border来解决。问题就是在安卓端发现这两个伪元素距离实际的位置有大概1px的距离。

左边为IOS，右边为安卓

代码

.modal-header::before {
  display: block;
  margin: 0;
  content: '';
  width: 0;
  height: 0;
  border-top: 0 solid transparent;
  border-left: .07rem solid transparent;
  border-right: 0 solid transparent;
  border-bottom: .1rem solid #7CA0F3;
  position: absolute;
  left: -.07rem;
  top: 0;
}

想请教一下这个问题的原因是什么，应该如何解决

Answer 1

已解决，在屏幕宽度偶数时似乎没有这个问题。因为题主的最外层font-size是根据屏幕尺寸动态设置的，存在浮点数情况。众所周知JS底层的浮点数计算是不精确的，所以猜测是渲染引擎计算ram时出现的问题。此处改用px单位即可解决(前提是不影响布局)