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来克服/解决实际网站上的错误。

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

Workaround/Solution

.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
}