1072262 - Inconsistent border rendering with border-collapse: collapse

Status: NEW

(Core :: Layout: Tables, defect, P3)

Description

[edvard.erlandsson]

Attachment: Image showing the problems

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.120 Safari/537.36

Steps to reproduce:

Render a table with border-collapse: collapse; and two rows (or more) of cells.

See example at: http://jsfiddle.net/supreme/xnnjg1qo/


Actual results:

When there are two or more rows of cells there is suddenly a big gap in the bottom border of the cells when the border-right-color is set to transparent.


Expected results:

I expect the right border to become transparent without affecting the border bottom. Which is the case when the table only have one row, I don't expect this behavior to change when adding more rows.

Chrome handles this as expected.

Comment 1

[Alexey Mak]

3 years have passed and still not fixed.
I wonder why it's so hard to even confirm one.

Comment 2

[Astley Chen (inactive)]

Tested on latest Nightly 58 on macOS & Linux, the 1px gap on the top left border was fixed.

Comment 3

[Gérard Talbot]

Edvard Erlandsson,

I am looking at your bug report and your test. There is indeed a significant difference between Firefox and Chrome. Please note that Firefox has some (several?) issues and bugs with border-collapse model.

Regarding your test, it can be improved, minimized and made more clear.
1- 'border-spacing: 0' in your test is unneeded, not relevant and because any border-spacing declaration has no rendering effect in the 'border-collapse: collapse' model.
2- 'width: 100%' is not needed in your test, is not part of your test
3- I get significant differences between Firefox 102.10.0 ESR and Chromium 112 regardless of number of rows...
4- You most likely wanted to write "Column 1" and "Column 2" instead of "Row 1" and "Row 2"

I am in the process of improving your test right now...

Regarding the spec., I think the following quote should decide:

"
If border styles differ only in color, then a style set on a cell wins over one on a row, which wins over a row group, column, column group and, lastly, table. When two elements of the same type conflict, then the one further to the left (if the table's 'direction' is 'ltr'; right, if it is 'rtl') and further to the top wins.
"
coming from
CSS 2.2, section 17.6.2.1 Border conflict resolution
https://www.w3.org/TR/CSS22/tables.html#collapsing-borders

so I think the 'transparent' color should win over the gray color here... in which case it would mean that Chrome is wrong and Firefox is correct.

Comment 4

[Gérard Talbot]

If I choose any other color in place of 'transparent', say, green, then both Firefox and Chrome render the green color, as expected. There may be a specification update somewhere stating that any non-transparent color wins over 'transparent'...

Comment 5

[Gérard Talbot]

Compare the rendering between Firefox version 102.10.0 ESR and Firefox version 114.0a1 buildID=20230419214510 and Chrome 112.0.5615.121 in the following 3 tests (minimizing to 3 selectors and a max of 5 declarations):

http://www.gtalbot.org/BugzillaSection/Bug1072262-InconsistentBorderRendering.html

http://www.gtalbot.org/BugzillaSection/Bug1072262-InconsistentBorderRendering-2.html

http://www.gtalbot.org/BugzillaSection/Bug1072262-InconsistentBorderRendering-3.html

I could be wrong here (I need a longer examination) but I believe Firefox is correct. At least, I think Firefox 102.10.0 ESR passes the nr 3 test.