When scrolling, the background of a position:sticky table row element is painted correctly as if it were position:fixed, but the row's borders follow the scrolled table contents. In my testing, any of thead, th, td, tr with position:-webkit-sticky exhibit this bug. Other elements (divs, etc) draw borders correctly.
Created attachment 223602 [details] testcase with position:sticky thead
Created attachment 223607 [details] reduced test case
I suspect dupe of bug 94128
3 years later, still a problem. https://en.wikipedia.org/wiki/List_of_Space_Shuttle_missions?withCSS=MediaWiki:Gadget-StickyTableHeaders.css The table headers here loose there borders whenever position sticky is used.
*** This bug has been marked as a duplicate of bug 94128 ***
Does this only happen on Retina displays?
@simon I just tested. No it happens on both Retina and non-Retina. Im also much less sure that this is an actual duplicate of 94128 btw. This seems much more likely to be a side effect of border collapse.
<rdar://problem/31516367>
This issue persists on Chrome. Not sure why it's listed as resolved. I'm guessing that people have come up with workarounds over the 4+ years this has been a bug... Any suggestions would be welcomed. :)
I also don't think this is the same bug as the one it was closed as a dupe of. As far as I understand, this bug occurs due to border collapsing.