-webkit-overflow-scrolling:touch 导致图片不显示bug

前言：

ios移动端 ul列表，上下滑动比较卡顿，不够流畅，添加了-webkit-overflow-scrolling:touch 属性后解决了这个bug,增加了滚动回弹效果。但是触发了另一个问题，上下滑动时 li 里面的 img图片不显示了，需要手动点一下才显示，文字数据是显示的，图片路径 src路径存在

视图：

主要 html:

<div class="slideDivContent" >
    <div>
        <div class="booklist_word">
            <div class="word_test" style="display: none;">
                </div>
            <div class="bookList">
                <ul id="selectBooksUrl">
                <li class="bookListLi" >
                    <a  href="" target="_blank" rel="external nofollow" >
                        <div>
                            <div class="bookListLiImg">
                                <img src="https://static.frhelper.com/MediaPool/ChannelImg/b5f5fb1c-f75d-49b0-bba2-573c6d040e54.jpg?stamp=-62135596800000" alt="每日外刊" style="height: 96.875px; width: auto;">
                            </div>
                            <div class="bookListLiText">
                                <p class="ft_14 listTitle">每日外刊</p>
                                    <p class="ft_12">用最新、最短的外刊</p>
                                    <p class="ft_12">学最多、最地道的英语</p>
                            </div>
                        </div>
                    </a>
                </li>
                </ul>
            </div>
        </div>
    </div>
</div>
           

主要css

最外层div加上 -webkit-overflow-scrolling属性，解决ios滑动不流畅

.slideDivContent {
    -webkit-overflow-scrolling: touch;
}
           

外层div里面的所有元素添加 -webkit-transform: translateZ(0px)属性，解决滑动时出现的空白（即图片不显示）

.slideDivContent > * {
    -webkit-transform: translateZ(0px);
}

           

参考地址：

CSS3属性webkit-overflow-scrolling：touch ERROR