您的位置:首页 > 其它

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

2018-01-29 10:55 281 查看

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,不要问我,我也不知道。

如果哪天有人遇到或知道为什么,希望能够告诉我。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐