阅读 86
absolute的img,在长列表中,ios渲染异常问题

absolute的img,在长列表中,ios渲染异常问题

现象具体描述,看代码

.rank-body.absolute.fz-24
    .rank-item.flex(v-for="item in rankList" :key="item.uid")
      .rank-num.flex-c-c
        rank-number(:rank="item.rank")
      .rank-user.flex
        avatar(:size="0.55" :user="item")
        text-ellipsis.mgl-10(:text="item.nickname" w="2.32rem")
      .douyin-nickname.flex
        .douyin-icon
        text-ellipsis.mgl-10(:text="item.douyin_nick" w="2.32rem")
      .zan-num.flex-c-c {{item.score}}
    // 	重点代码在这⬇️
      .video-wrap.relative(v-if="item.video_cover" @click="onVideo(item.video_src)")
         img.video-cover.absolute.full(:src="item.video_cover")
          .foot-desc.absolute
          .video-icon.absolute
          text-ellipsis.tik-name.white(:text="item.video_title" textIndent=".28rem" lineHeight="0.18rem" width="1.8rem" :clamp="2")
复制代码
.video-wrap
  width 1.56rem
  height 1.04rem
  margin-left 0.8rem
  border-radius 0.05rem
  border 1px solid #fff
  overflow hidden
.video-cover
  left 0
  top 0
.douyin-icon
  bg-size(0.35rem,0.39rem,'douyin')
.foot-desc
  w-h(100%, 0.4rem)
  padding 0.04rem
  bottom 0
  left 0
  background-color rgba(0,0,0,0.48)
  border-radius 0 0 0.05rem 0.05rem
复制代码

结构描述: 在排行榜中,最后一项需要显示视频的封面,在封面底部显示视频的描述; 因此写了一个固定宽高的relative的video- wrap,然后视频封面以及底部描述均为absolute定位;

异常显示bug描述:当列表长度小于5时显示正常,一旦超过,视频封面只能显示到第4张,第五张加载部分后就卡顿了;往上滚动后,后续封面均无法显示; 这时再往下滚动回到开始,发现最初显示的4张,也消失不见了;

解决过程: 排除资源大小问题,排除其他兄弟元素影响,排除img标签影响…… 最后更改结构,只显示一张非absolute的图片,正常; 进一步定位,发现absolute问题;然后查看其他正常的类似结构的,发现其他类似正常的,有transform: translate3D(-50%,-50%, 0); 然后加上如此,渲染正常起来; 改成transform:translateZ(0); 也是正常; 问题找到了可以修复了,但是要进一步探究原因;

原因: Chrome渲染的些bug自然不止本文这两个,主要是本文bug都由绝对定位absolute引发(可能高效渲染计算设计导致),然后都可以-webkit-transform: translateZ(0)修复,因此就放在一起讲了。 记得以前似乎见到过浮动随机渲染的bug;去年做iOS原型时候遇到过过场渲染的bug(夜太深,具体我记不清了),也是使用translateZ修复的。所以,如果大伙儿在折腾webkit内核页面时候,遇到奇怪渲染问题,都可以试试webkit界的haslayout, 渲染问题修复神器-webkit-transform: translateZ(0)(-webkit-transform: translateZ(0); /* 没错,靠的就是你!*/),说不定会有好运降临 ————————————————

原文链接:blog.csdn.net/lu92649264/…

文章分类
前端
文章标签