css/element 影响？

Question

如图：右边红色的提示 怎么会这样呢？（头大~）

当父盒子背景色为白色时‘正常’，或者把select的i标签的过渡给取消也就‘正常’了

可利用下面代码测试

// vue2
// 简化 
<label class="required required-hint">指定对象：</label> 


body{
  background-color: #000000;
}
    label {
      display: inline-block;
      width: 100px;
      font-size: 15px;
      font-family: HarmonyOS Sans SC;
      color: #fff;
    }
    .required {
      &::before {
        content: "*";
        color: red;
        font-size: 20px;
      }
      position: relative;
    }
    .required-hint {
      &::after {
        content: "请补全信息";
        color: red;
        font-size: 13px;

        position: absolute;
        left: 6px;
        bottom: -15px;
      } 
    }

Answer 1

发生了重绘

没有定位时没有重绘:

这个是relative的副作用, 上方的元素旋转, 元素位置改变进行重绘, 下方元素用的相对定位, 上方位置改变使下方的也改变进行了重绘, 就有了闪一下的现象