现象具体描述，看代码
.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); /* 没错，靠的就是你！*/），说不定会有好运降临 ————————————————
