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

应该是过度动画，页页面DOM刷新造成的帧率问题