[bug]小米部分机型(5x、mix2)中，文字/背景闪现然后消失

2/9更新

后来遇到float 元素也这样，改成flex布局就没问题。不知道具体原因。

描述：

使用vue 2.4开发HTML5时，遇到在小米部分机型（5x、mix2）中，文字/文字背景闪现然后消失。

如下，.a-blue-block的蓝色背景闪现一下，接着蓝色背景突然消失，只剩下文字。

html 结构：

      <div class="pannel-item" v-for="(item, index) in ps" :key="index">

        <div class="a-blue-block">

          <div class="title">

            <span>{{item.name}}</span>

            <span v-if="item.ename">{{item.ename}}</span>

          </div>

          <div class="desc">{{item.itn}} {{item.idcard}}</div>

        </div>

     <div>

部分css

$rem: 1 / 18.75 * 1rem;

.a-blue-block {

  padding: 16*$rem 20*$rem;

  border-radius: 6 * $rem;

  color: #000;

  background: #1188FF;

  box-shadow: 0 4px 10px #ccc;

}

修复：

在消失元素的父级上，添加background:#fff。

至于为什么会出现这个bug，以及添加白色/任意背景可以修复这个bug，不要问我，我也不知道。

如果哪天有人遇到或知道为什么，希望能够告诉我。

巴特西

[bug]小米部分机型(5x、mix2)中，文字/背景闪现然后消失

最新文章

热门文章