Chrome issue: blurry text, sticky position and mobile devices

Question

Help please! I have blurry text on sticky div on mobile devices. Here's css:

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

What I tried and it didn't help me:

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

2) transform: translateZ(0);

3) -webkit-font-smoothing: antialiased;

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

Here's fiddle: https://jsfiddle.net/Lmt309qv/

How it looks like:

But it's ok when div reaches bottom of the document. Did anyone have such problem?

Answer 1

I know it's a bit late, but I have encouter the same problem, after some research I found workaround from 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.

For case when content is changing it's size is a bit problematic.

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
}