chrome下translateZ导致的文字模糊

Question

我用better-scroll实现了一个横拉滑动框，但是效果实现后文字却很模糊，我把样式中的translateZ（0px）删除后就不模糊了，但是因为better-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>财经</li>
      <li>民生</li>
      <li>国际</li>
      <li>体育</li>
      <li>科技</li>
      <li>教育</li>
      <li>环境</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;
      }
    }
  }
  

Answer 1

emmmmm,问题解决了，原来这就是chrome下的一个视觉问题，我把浏览器的缩放比例调到100%就不会了，

之前一直都是默认的85%