Safari shows errant borders on table cells

[smenjas]

On the periodic table, there are empty table cells for the first 3 rows/periods. td.empty has border: none and Chrome v111 honors this. However, Safari v16.3 & v16.4 shows a border between rows 1 & 2 (it's a black border in light mode and a white border in dark mode).

This bug also appears on the isotopes view, at the top of the bottom left th for the x-axis.

[smenjas]

I can hide the errant border on the periodic table by setting border-color: white on td.empty, but that affects the borders of adjacent table cells that aren't empty. Interestingly, this affects the top and left borders of adjacent cells, but not right borders.

border-top and border-bottom properties don't have any affect.

[smenjas]

Searching for this issue hasn't worked out. There are plenty of reports of Safari inconsistencies for border-radius, border-style: dotted, and form fields' outline property, but nothing for solid borders on table cells. I guess no one builds tables any more.

[smenjas]

If you look at the isotopes graph in dark mode, you'll see a limegreen border above the th.x-axis.min element. This makes it clear that the bug only affects cells where there is a mismatch in the rowspan of adjacent cells. It may affect colspan mismatches too, but it's not affecting the th.y-axis.min element on the isotopes graph at any rate.

[smenjas]

The magic words were: "safari border colspan"

That search led me to:

• Stack Overflow: Strange behaviour with border-collapse and colspan
• WebKit Bugzilla: Bug 20840 - Wrong collapsing border resolution when a table has cells with different colspans

Sadly, I had to clutter my page source with extra empty table cells to work around the rendering bug.