Chrome问题：模糊文字，粘性位置和移动设备

Question

请帮忙！我在移动设备上的粘性div上有模糊的文字。 这是css：

.sticky-panel {
  position: sticky;
  z-index: 3;  
  width: 100%;
  margin-top: auto;
  bottom: -1px;  
}

我尝试了什么但它没有帮助我：

1）transform: translate3d(0,0,0);

2）transform: translateZ(0);

3）-webkit-font-smoothing: antialiased;

4）-webkit-filter: blur(0.000001px);

这里的小提琴：https://jsfiddle.net/Lmt309qv/

它看起来如何：

但是当div到达文档的底部时，它就可以了。有没有人有这样的问题？

Answer 1

我知道它有点晚了，但我遇到了同样的问题，经过一些研究后我找到了webkit bug tracker的解决方法

  

我可以通过强制容器拥有top或height整数来克服/解决实际网站上的错误。

对于内容正在改变的情况，它的大小有点问题。

解决方法/解决方案

.sticky-panel {
  position: sticky;
  z-index: 3;  
  width: 100%;
  margin-top: auto;
  bottom: -1px;
  top: 0px; // <-- set number of pixels for top
  height: 100px; // or set number of pixels for height
}

Answer 2

通过使用transform可以为我工作：translateX（1％）

    position: sticky;
    top: 10px;
    transform: translateX(1%); //Make Text is not blurry