<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - Elements and children with `position: sticky` blur when they become stuck/un-suck on floating point values"
href="https://bugs.webkit.org/show_bug.cgi?id=159428">159428</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Elements and children with `position: sticky` blur when they become stuck/un-suck on floating point values
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>Safari 9
</td>
</tr>
<tr>
<th>Hardware</th>
<td>All
</td>
</tr>
<tr>
<th>OS</th>
<td>OS X 10.11
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>CSS
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>webkitbugs@rmnet.com
</td>
</tr></table>
<p>
<div>
<pre>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:
<a href="http://codepen.io/ar/full/kXwXjA/">http://codepen.io/ar/full/kXwXjA/</a>
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:
<a href="http://stackoverflow.com/questions/15300163/how-do-browsers-deal-with-non-integer-values-for-height-and-width">http://stackoverflow.com/questions/15300163/how-do-browsers-deal-with-non-integer-values-for-height-and-width</a>
<a href="http://stackoverflow.com/questions/4308989/are-the-decimal-places-in-a-css-width-respected">http://stackoverflow.com/questions/4308989/are-the-decimal-places-in-a-css-width-respected</a>
<a href="http://www.simonbattersby.com/blog/browsers-and-fractional-pixels/">http://www.simonbattersby.com/blog/browsers-and-fractional-pixels/</a>
Possibly Related Bugs:
<a class="bz_bug_link
bz_status_NEW "
title="NEW - Repaint issue when scrolling line with position:sticky"
href="show_bug.cgi?id=94128">https://bugs.webkit.org/show_bug.cgi?id=94128</a>
<a class="bz_bug_link
bz_status_NEW "
title="NEW - Hardware-accelerated rendering fails to round to whole pixels"
href="show_bug.cgi?id=120583">https://bugs.webkit.org/show_bug.cgi?id=120583</a>
<a class="bz_bug_link
bz_status_REOPENED "
title="REOPENED - REGRESSION (r172008): Icon fonts using hinting blurred at odd window widths"
href="show_bug.cgi?id=152393">https://bugs.webkit.org/show_bug.cgi?id=152393</a>
<a class="bz_bug_link
bz_status_UNCONFIRMED "
title="UNCONFIRMED - Losing text sharpness (blur) when scaling div over a fixed position element (on mobile safari / webkit browser)"
href="show_bug.cgi?id=73316">https://bugs.webkit.org/show_bug.cgi?id=73316</a>
<a class="bz_bug_link
bz_status_NEW "
title="NEW - CSS scale transform causes blurry content when iframe contains fixed positioned content"
href="show_bug.cgi?id=133801">https://bugs.webkit.org/show_bug.cgi?id=133801</a></pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>