ios11 safari iscroll数据不展示bug

最新推荐文章于 2025-09-05 11:35:04 发布

转载最新推荐文章于 2025-09-05 11:35:04 发布 · 136 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5a9521135188257a6b061dd7

文章标签：

#后端 #javascript #ViewUI

本文介绍了一个在4G条件下使用iScroll时遇到的文字不显示的问题，通过分析HTML、CSS及JavaScript代码发现，该问题可能与transform属性及伪元素有关，并提供了解决方案：为受影响元素设置最小高度。

这个bug是基于一个场景，iscroll使用的数据是后端传过来的，4g条件下居然那些文字不展示。

<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8>
  <title>鑫合汇</title>
  <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
  <meta content=yes name=apple-mobile-web-app-capable>
  <meta name=apple-mobile-web-app-status-bar-style content=black-translucent>
  <meta content=black name=apple-mobile-web-app-status-bar-style>
  <meta name="format-detection" content="telephone=no"/>
	<title></title>
    <style type="text/css">
        .set-items ul{
    margin: 0;
}
.set-items{
    /*min-height: 10px;*/
    overflow: initial;    clear: both;

}
.set-items:before,#ww:before {
    content: "";
    display: table;
}
.set-items ul {

}
.set-items ul li {
        /*height: 5rem;
    line-height: 5rem;
    padding: 0 1rem;
    border-bottom: #eee 1px solid;
    overflow: hidden;
    color: #333;*/
}


</style>

</head>
<body>

    <section class="set-items" id="city" style="transform: translate(0px, 0px) translateZ(0px);"><ul id="citys"></ul></section>
<script type="text/javascript">
    setTimeout(function () {
        
        
        // for(let i =0; i< 25;i++){
        //     var li = document.createElement("li")
        //     li.innerHTML = '城市'
        //     document.getElementById("citys").appendChild(li)
        // }
    document.getElementById("citys").innerHTML='<div><div class="pullup"><!----> <div class="pullup-list"><div><div class="productList"><ul><li class=""><div class="productList-head"><h2 class="productList-title"><div class="time_limit badge ">29<small><!---->天</small></div>鑫车二号<em class="badge ">银行存管</em> <!----> <!----> <!----> <!----></h2> <!----></div> <section class="productList-body"><article class="productList-main"><dl><dt>历史年化利率</dt> <dd class="">7.00<small><!---->%</small></dd></dl></article> <!----> <!----> <aside class="productList-side"><p class="info"><span class="weak">剩余:</span><span class="remain_amount">53.00元</span></p> <div class="wave"><div class="waveline" style="width: 99%;"></div></div></aside> <!----> <!----></section></li></ul></div> <!----> <div class="pull-up-noMore pullup-text"><div class="c-light"><p><span><!----> <!----></span></p></div> <!----></div></div> </div> <div><div class="pullup-text"><div></div></div> <!----></div></div></div>'
          document.getElementById("city").style = "transform: translate(0px, 0px) translateZ(0px);"
}, 100);

</script>
</body>
</html>
复制代码