chrome下translateZ導(dǎo)致的文字模糊

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

部分代碼如下，
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>財經(jīng)</li>
      <li>民生</li>
      <li>國際</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;
      }
    }
  }