[Webkit-unassigned] [Bug 159428] New: Elements and children with `position: sticky` blur when they become stuck/un-suck on floating point values

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=159428

            Bug ID: 159428
           Summary: Elements and children with `position: sticky` blur
                    when they become stuck/un-suck on floating point
                    values
    Classification: Unclassified
           Product: WebKit
           Version: Safari 9
          Hardware: All
                OS: OS X 10.11
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: webkitbugs at rmnet.com

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

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.webkit.org/pipermail/webkit-unassigned/attachments/20160705/45170d1d/attachment.html>