Is this a Chrome bug? Border issue with positioning + border-collapse on tables

[Alex Zaworski]

Here’s a Pen showcasing the problem:

http://codepen.io/alexzaworski/pen/790bde905a4d64c599f139ad56b624e4

It looks like if you have a <table> with border-collapse: collapse containing a <td> with position:relative and a border on it, the border doesn’t show up.

If you use a media query to set the <td> to be position:static (or display:block, apparently) then the border starts showing up when it hits the breakpoint, and stays visible even if you exit the breakpoint.

Adding to the wtf-ery, setting a a background on parent/sibling elements seems to make the border work as well. I’d guess it has something to do with triggering a repaint but that’s outside of my knowledge of browser internals.

Can anyone reproduce this? I’m using Chrome 50.0.2661.94 on OS X 10.10.5

Here’s a gif of what I’m seeing on my screen:

[Alex Zaworski]

Confirmed reproducible on windows too ¯\_(ツ)_/¯

[Author]

Posts