css - Chrome 问题 : blurry text, 粘性位置和移动设备

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);
这是 fiddle : https://jsfiddle.net/Lmt309qv/

它的样子:



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

Answer 1

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

I am able to overcome/workaround the bug on the actual site by forcing the container to have a top or height that is a whole number.

对于内容发生变化的情况，它的大小有点问题。
变通方法/解决方案

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