New issue
Advanced search Search tips

Issue 712847 link

Starred by 5 users

Issue metadata

Status: Available
Owner: ----
Cc:
Components:
EstimatedDays: ----
NextAction: 2017-05-03
OS: Mac
Pri: 3
Type: Bug



Sign in to add a comment

position:sticky: Border-collapse does not interact well with sticky

Reported by j...@cognitip.com, Apr 18 2017

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36

Steps to reproduce the problem:
1. CSS sticky on table thead (Can share HTML * 
2. Apply border to thead
3. Scroll

What is the expected behavior?
After scrolling past the break point for the sticky transition (Relative>Fixed) borders should stick with the thead element. 

What went wrong?
Borders didn't move away from original location, stayed fixed like they were a style on another element.

Did this work before? No 

Does this work in other browsers? No
 Same as Chromium.

Chrome version: 57.0.2987.133  Channel: stable
OS Version: OS X 10.12.4
Flash Version: 

Problem seems to only apply to thead from the tests that I have done so far. Using a normal tag nested inside a DIV works fine with borders.
 
Screen Shot 2017-04-18 at 22.09.23.png
536 KB View Download
Screen Shot 2017-04-18 at 22.09.28.png
508 KB View Download
Screen Shot 2017-04-18 at 22.09.33.png
512 KB View Download
Screen Shot 2017-04-18 at 22.09.34.png
515 KB View Download

Comment 1 by j...@cognitip.com, Apr 18 2017

Additionally: Some borders have background overflowing before Relative>Fixed breakpoint hasn't been triggered. 

To be precise, border-left and border-top seem to have been overflown by the background until we engage the breakpoint.

Please see the difference in thead in "Screen Shot 2017-04-18 at 22.09.23.png" (Non-desired) and Screen Shot 2017-04-18 at 22.09.28.png (desired).

Comment 2 by sashab@chromium.org, Apr 19 2017

Components: -Blink>CSS Blink>Scroll

Comment 3 by j...@cognitip.com, Apr 19 2017

Just to note, box-shadow doesn't seem to be susceptible to this bug.
Cc: flackr@chromium.org smcgruer@chromium.org
Labels: Hotlist-ThreadedRendering
Status: Untriaged (was: Unconfirmed)
jord@ can you provide us with a minified HTML that demonstrates the issue?
Labels: Needs-Feedback
NextAction: 2017-05-03
Cc: yigu@chromium.org
Owner: smcgruer@chromium.org

Comment 7 by bokan@chromium.org, Apr 19 2017

Status: Assigned (was: Untriaged)

Comment 8 by j...@cognitip.com, Apr 21 2017

Hi, Please see the CodePen below for applied HTML/CSS

CodePen: https://codepen.io/anon/pen/ZKWdPL 
Labels: -Needs-Feedback
Thanks for the repro! :)

A few notes from initial look:

1. Sadly sticky on <thead> is not going to be supported as of Chrome M58+. Please see issue 702927 for details (and feel free to star it and the blocking issue 417223 !)

2. However, the bug still reproduces when using sticky <th> and putting the border on the <th>: http://output.jsbin.com/ludivop/quiet

3. It appears to be related to border-collapse; removing the border collapse on the jsbin example causes the border to scroll with the headers.
4. The bug reproduces identically in Safari, and cannot be tested in Firefox as they do not support sticky in tables at all.

Comment 11 by j...@cognitip.com, Apr 21 2017

No problem dude! :)

Awh shucks, it seems a bit silly for the support of <thead> to be removed from the spec, it seems like an amazing user-experience for people to be able to see the columns of a table their viewing. Hopefully, when 3 gets implemented we'll see a return.

Thanks for the information. :)
Cc: majidvp@chromium.org
Labels: -Pri-2 Pri-3
smcgruer@: So should we just de-dup this against issue 702927 or do you want to keep this bug separate to track the border issue separately? In that case I suggest editing the bug title.


Also, for the border issue, are you still the right owner? 

AFAICT, all table related sticky bugs are P3. I made this P3 as well.
Owner: ----
Status: Available (was: Assigned)
Summary: position:sticky: Border-collapse does not interact well with sticky (was: Position:Sticky: Borders left behind after scrolling past Relative>Fixed breakpoint)
No work is currently happening on sticky, dropping to Available.
I think the issue I am seeing is related to this one.

On https://steamdb.info/stats/toplevels/ when scrolling up and down on 70.0.3510.2 I sometimes see a duplicate border line get stuck.
06-195058048.png
12.0 KB View Download

Sign in to add a comment