el-carousel导致页面顶部字体闪烁问题
2019-04-30 本文已影响0人
五洋捉鳖zz
- 问题描述。网站顶部有个展示 "今天是xxx年xxx月xxx日 00:00:00"的动态时钟。下方使用ELementUI的el-carousel做的动态图片banner。 headerBar的 css如下,
.header-bar{
width: 100%;
height: 30px;
position: absolute;
z-index: 1;
left: 0px;
top: 0px;
box-sizing: border-box;
.bg{// 黑色半透明背景
background: #031D49;
opacity:0.75;
width: 100%;
height: 100%;
float: left;
position: relative;
}
.header-bar-text{ // 展示文字区域
position: relative;
width: 1200px;
height: 100%;
color: #DE4029;
font-size: 14px;
line-height: 30px;
z-index: 1;
-webkit-box-sizing: border-box;
margin: 0 auto;
display: block;
}
- 上线后发现header-bar-text中的文字会时不时的模糊下,开始考虑是header-bar-text中频繁刷新的时间引起的,去除了时间后发现仍然有问题。最终发现,模糊的频率与下方el-carousel切换的频率一样。给el-caroursel增加transform后文恢复正常:
.el-carousel{
transform: translate3d(0,0,0)
}