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
}