Css Chrome问题：模糊文本、粘性位置和移动设备

救命啊！我在移动设备上的粘性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字体平滑：抗锯齿

4） 
-webkit过滤器：模糊（0.000001px）

这是小提琴：

它看起来是什么样子：


但当div到达文档的底部时就可以了。有人有这样的问题吗？
我知道有点晚了，但我也遇到了同样的问题，经过一些研究，我找到了解决办法

我能够克服/解决实际站点上的错误，方法是强制容器具有一个
top
或
height
，这是一个整数

例如，当内容发生变化时，其大小有点问题

解决方法/解决方案
。粘性面板{
位置：粘性；
z指数：3；
宽度：100%；
页边顶部：自动；
底部：-1px；
top:0px；//它通过使用transform:translateX（1%）对我有效

我无法用您提供的CSS复制此内容。
.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
}

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