Bug 159428 – Elements and children with `position: sticky` blur when they become stuck/un-suck on floating point values

• Status: NEW
• Component: CSS

[ar]

When the container of a element with `position: sticky` begins or ends on a sub-pixel, it causes the elements inside of the sticky element to blur *when* the sticky thing gets stuck or unstuck.

In the case of the *sticky* thing being at the top of the container:
- The blurring is triggered when the sticky thing becomes stuck.

In the case of the *container* ending on a sub-pixel:
- The blurring is triggered when the sticky thing touches the bottom/end of the container (and un-sticks). But un-blurs (becomes sharp) when you scroll back up and it becomes stuck again.

I've created a test case, but I haven't been able to get it to trigger the bug. (Crappy test case, huh?).

Testcase:
http://codepen.io/ar/full/kXwXjA/

It does happen reliably on the site I've been working on and I've seen it other places. So I've included screenshots from that site, in the *normal* and *blurred* states.

Some stuff I thought might be the culprit, but ruled out (unless I did something wrong):
- -webkit-font-smoothing: antialiased
- flexbox
- @font-face
- box-sizing: border-box
- text-shadow

Although I wasn't able to replicate the bug in the test case, 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.

ex:
- Computed Height: 2505.328125px = Blur/bug
- Forced Height: 2504px = No blur/no bug

Of course, I did that in the Inspector, because the container can't have a pre-defined height because the content inside of it is always changing.

In the actual site, I first ran into this because the height of the element just above the sticky container was being calculated. It took me a while to figure it out. But once I declared a hight (not happy about having to do that), the blurring went away.

I think the problem in reproducing it has something to do with the height being *calculated* and being the result of compounding sub-pixel values of the container's child elements. Which is why I'm not able to reproduce it, but I am able to overcome it.

Interestingly, in the test case, the container's height *is* a floating point number: 302.4375px (unless I changed something after submitting this bug). So either I've completely mis-deduced this, or there is some other unknown cause that, combined with the floating point height, is causing this.

Feel free to fork my test case if you know how to trigger it.

Another thing: If I trigger the bug (blurred elements) and then change the size of the viewport (via Window Size, Inspector Size), the blur goes away.

The only real-world solution I was able to think of was using Javascript to Math.round() the `height` or `top`. But that also seems like a super-not-good idea.

Safari:
- 9.1.1 (11601.6.17)
- 9.1.2 (Technology Preview - Release 7)
- iOS 9.3.2 (iPhone)
- iOS 7.x (iPad)

Chrome does NOT have this bug:
- 54.0.2787.0 canary

Reference:
http://stackoverflow.com/questions/15300163/how-do-browsers-deal-with-non-integer-values-for-height-and-width
http://stackoverflow.com/questions/4308989/are-the-decimal-places-in-a-css-width-respected
http://www.simonbattersby.com/blog/browsers-and-fractional-pixels/

Possibly Related Bugs:
https://bugs.webkit.org/show_bug.cgi?id=94128
https://bugs.webkit.org/show_bug.cgi?id=120583
https://bugs.webkit.org/show_bug.cgi?id=152393
https://bugs.webkit.org/show_bug.cgi?id=73316
https://bugs.webkit.org/show_bug.cgi?id=133801

[ar]

Created attachment 282800 [details]
Live Site Screenshot: Not Stuck: Sharp

[ar]

Created attachment 282801 [details]
Live Site Screenshot: Stuck: Blurry

[ar]

Here's a live example:
http://filamentgroup.github.io/fixed-sticky/demos/demo-control.html

Via:
https://github.com/tbranyen/fixed-sticky

But this is their *control*, using `position: sticky`. Not their JS polyfill.

I don't see any floating point `top` or `height` values though.

[alan]

I think this is related to bug 156860. bug 156860 is about aligning all the composited containers on device pixel position. (as it seems like we are missing a device pixel snapping somewhere for sticky)
I'll try to come up with a simple test case.

[ar]

I just found that this effects the "WWDC 2016 Videos" page on Apple.com:
https://developer.apple.com/videos/wwdc2016/

Check out the <section> headings ("App Frameworks", "Design", "Developer Tools", etc.) as they become stuck and un-stuck.

Specifically:
section.all-content > ul.collection-focus-groups > li.collection-focus-group > section.sticky

It can be a little hard to see because of the additional backdrop-filters and overall low contrast aesthetic, but it's there.

[Jon Lee]

<rdar://problem/29695094>

[Jon Lee]

@ar, is this something you're still seeing on the latest Safari Tech Preview?

[ar]

Yes, I'm still seeing this in Safari Tech Preview - Release 16 (Safari 10.1, WebKit 11603.1.10)

But I'm on El Capitan and it looks like I can't install newer 17+ releases.

[alan]

(In reply to comment #8)
> Yes, I'm still seeing this in Safari Tech Preview - Release 16 (Safari 10.1,
> WebKit 11603.1.10)
> 
> But I'm on El Capitan and it looks like I can't install newer 17+ releases.
It'd be a big help if you could attach a test case.