我用better-scroll實(shí)現(xiàn)了一個(gè)橫拉滑動(dòng)框，但是效果實(shí)現(xiàn)后文字卻很模糊，我把樣式中的translateZ（0px）刪除后就不模糊了，但是因?yàn)閎etter-scorll本身的原因，在每一次滑動(dòng)后就會(huì)給加上這個(gè)屬性，我很奇怪不知道如何解決這個(gè)問題。
如下圖所示：

部分代碼如下，
html:

<header>
  <div class="research">
    <i class="iconfont">&#xe627;</i>
  </div>
  <div class="types" ref="container">
    <ul @click="setWidth" ref="slider">
      <li>要聞</li>
      <li>軍事</li>
      <li>財(cái)經(jīng)</li>
      <li>民生</li>
      <li>國(guó)際</li>
      <li>體育</li>
      <li>科技</li>
      <li>教育</li>
      <li>環(huán)境</li>
    </ul>
  </div>
</header>

css部分寫的是less,有部分屬性省略了：

header{
  display: flex;
  padding: 10px 0;
  .types li{
    padding: 4px 5px;
  }
  .research{
    padding: 4px 5px 4px 10px;
    display: inline-block;
    width: 20px;
  }
  .types{
    flex: 1;
    overflow: hidden;
    z-index: 100;
  }
}
.types{
    ul {
      height: 100%;
      position: relative;
      li {
        display: inline-block;
        flex: 1;
      }
      li:hover,li:focus{
        color: darkblue;
        border-bottom: 1px darkblue solid;
      }
    }
  }