Firefox 70 fails the "dimensions: width/height on a table row with phantom borders (gh-3698)" test #4529

Activity

1. mgol

   added

   Bug

   Dimensions

   on Oct 22, 2019
2. mgol

   self-assigned this

   on Oct 22, 2019
3. mgol

   added this to the 3.5.0 milestone on Oct 22, 2019
4. mgol

   added

   Blocker

   on Oct 22, 2019
5. timmywil commented on Oct 22, 2019

   

   timmywil

   on Oct 22, 2019

   Member

   More actions

   Just a note, we keep track of swarm failures in the meeting notes. Those tests can be in flux a lot between releases and I don't think we need to create a GH issue for each failure. All failures are always addressed before a release can go out.
6. mgol commented on Oct 22, 2019

   

   mgol

   on Oct 22, 2019

   MemberAuthor

   More actions

   This doesn't fail on Swarm as we don't have Firefox 70 there yet; it fails on Travis as I've recently added Firefox testing there & Firefox 70 has been released today.

   I think these issues make sense; they e.g. allow to assign an issue to a particular person, they also make it easier to distinguish flakes from consistent issues (this is the latter case). It looks like a real issue to me, it fails on stable, beta & nightly and I meant to look at it tomorrow.
7. mgol commented on Oct 23, 2019

   

   mgol

   on Oct 23, 2019

   MemberAuthor

   More actions

   To clarify, I'm not saying we have to create issues for all those TestSwarm failures. But we can if we feel the need IMO.
8. mgol commented on Oct 23, 2019

   

   mgol

   on Oct 23, 2019

   MemberAuthor

   More actions

   One additional reason to allow issue creation in such cases is that this creates a space to dump the investigation results which I plan to do soon.
9. mgol commented on Oct 23, 2019

   

   mgol

   on Oct 23, 2019

   Last edited by mgol

   MemberAuthor

   More actions

   Results from my investigation:
   The failing test case was added in #3738; it works on the following HTML:

   <table id="gh3698" style="border-collapse: separate; border-spacing: 0; background: #baffc9"><tbody>
   	<tr style="margin: 0; border: 10px solid black; padding: 0">
   		<td style="margin: 0; border: 0; padding: 0; height: 42px; width: 42px;"></td>
   	</tr>
   </tbody></table>

   and runs .outerWidth() & .outerWidth( true ) on the tr element. In all our tested browsers, including Chrome 78 & Firefox <70, it returns 42, with the exception of Firefox 70 where it returns 62. The issue is that Firefox 70 started reporting 10px for getComputedStyle( tr ).borderLeftWidth (the same for borderRightWidth); Firefox 68 reports 0px. However, Chrome already reports 10px as well... So why did it start breaking? Because in Firefox (both 68 & 70) getComputedStyle( tr ).width is 42px while in Chrome it's 22px - it used to add up to the same number even though partial results were different.

   An interesting consequence of that is that in both Firefox 68 & 70 $( tr ).innerWidth() returns 42px while in Chrome it returns 22px - we just don't have a test that would report this difference.

   Safari behaves just like Chrome while Edge & IE 11 returns auto for getComputedStyle( tr ).width - but we already work around that. getComputedStyle( tr ).borderLeftWidth is 10px in all browsers (Chrome 78, Firefox 70, Safari 13, Edge 18 & IE 11) except Firefox 68 so that change actually aligns them more with others.
10. mgol

    added

    Needs review

    on Oct 23, 2019
11. mgol commented on Oct 23, 2019

    

    mgol

    on Oct 23, 2019

    MemberAuthor

    More actions

    Reported to Firefox at https://bugzilla.mozilla.org/show_bug.cgi?id=1590837.
12. mgol

    added 3 commits that reference this issue on Oct 28, 2019

    Tests: Skip a "width/height on a table row with phantom borders" test…

    ...

    b8e3983

    Tests: Skip a "width/height on a table row with phantom borders" test…

    ...

    0c12e49

    Tests: Skip a "width/height on a table row with phantom borders" test…

    ...

    c79e1d5
13. 3 remaining items

    Load more

14. gibson042 commented on Nov 5, 2019

    

    gibson042

    on Nov 5, 2019

    Last edited by gibson042

    Member

    More actions

    I have been dreading this because table layout is just so special, but the reality is that we're surprisingly consistent with all browsers except for Firefox.

    https://output.jsbin.com/siqolaxipa

    browser	border-collapse	CSS widths	offsetWidth	jQuery width/inner/outer
    IE 11	separate	2×┃10px┃ auto	42	22 ≤ 22 ≤ 42
    Edge 18	separate	2×┃10px┃ auto	42	22 ≤ 22 ≤ 42
    Chrome 70	separate	2×┃10px┃ 22px	42	22 ≤ 22 ≤ 42
    Safari 11.1	separate	2×┃10px┃ 22px	42	22 ≤ 22 ≤ 42
    Safari 12.1	separate	2×┃10px┃ 22px	42	22 ≤ 22 ≤ 42
    Android 9	separate	2×┃10px┃ 22px	42	22 ≤ 22 ≤ 42
    iOS 12	separate	2×┃10px┃ 22px	42	22 ≤ 22 ≤ 42
    Firefox 69	separate	2×┃ 0px┃ 42px	42	42 ≤ 42 ≤ 42
    Firefox 70	separate	2×┃10px┃ 42px	42	42 ≤ 42 ≤ 62
    --	--	--	--	--
    IE 11	collapse	2×┃10px┃ auto	32	12 ≤ 12 ≤ 32
    Edge 18	collapse	2×┃10px┃ auto	32	12 ≤ 12 ≤ 32
    Chrome 70	collapse	2×┃10px┃ 12px	32	12 ≤ 12 ≤ 32
    Safari 11.1	collapse	2×┃10px┃ 12px	32	12 ≤ 12 ≤ 32
    Safari 12.1	collapse	2×┃10px┃ 12px	32	12 ≤ 12 ≤ 32
    Android 9	collapse	2×┃10px┃ 12px	32	12 ≤ 12 ≤ 32
    iOS 12	collapse	2×┃10px┃ 12px	32	12 ≤ 12 ≤ 32
    Firefox 69	collapse	2×┃ 0px┃ 32px	32	32 ≤ 32 ≤ 32
    Firefox 70	collapse	2×┃10px┃ 32px	32	32 ≤ 32 ≤ 52

    Collapsed-borders mode doesn't even come close to matching the CSS box model we assume in jQuery dimensions, so I think that can be thrown out for this discussion.

    But in separated-borders mode, we have the right .outerWidth() for all browsers except Firefox 70 and the wrong .width() and .innerWidth() for all browsers except Firefox.

    To fix .outerWidth(), I think we should be pragmatic and update the reliableTrDimensions test so that it additionally reports false for Firefox 70 (e.g., when the rounded sum of computed height and computed border width does not equal offsetHeight), sacrificing fractional pixels for computed dimensions of table rows (but not for their containers or children, where dimensions are more relevant).

    I don't have any good ideas to fix .width() and .innerWidth() right now, but maybe it's fine for them to be broken in both table borders modes.
15. mgol

    added

    Needs review

    on Nov 9, 2019
16. timmywil

    removed

    Needs review

    on Dec 2, 2019
17. timmywil commented on Dec 2, 2019

    

    timmywil

    on Dec 2, 2019

    Member

    More actions

    We'll at least do a PR for outerWidth.
18. mgol

    modified the milestones: 3.5.0, 3.6.0 on Mar 16, 2020
19. timmywil

    assigned

    timmywil

    and unassigned

    mgol

    on Nov 2, 2020
20. timmywil

    added 2 commits that reference this issue on Nov 9, 2020

    Dimensions: Modify reliableTrDimensions support test to account for FF

    ...

    This issue will close once commit 15a2648 is merged into the 'main' branch.

    15a2648

    Dimensions: Add offset prop fallback to FF for unreliable TR dimensions

    ...

    This issue will close once commit b1da923 is merged into the 'main' branch.

    b1da923
21. mgol

    added

    Has Pull Request

    on Nov 10, 2020
22. timmywil

    closed this as completedin #4808on Jan 11, 2021
23. timmywil

    added 2 commits that reference this issue on Jan 11, 2021

    Dimensions: Add offset prop fallback to FF for unreliable TR dimensions

    ...

    This issue will close once commit 3bbbc11 is merged into the 'main' branch.

    3bbbc11

    Dimensions: Modify reliableTrDimensions support test to account for FF

    ...

    This issue will close once commit bcd40aa is merged into the 'main' branch.

    bcd40aa
24. github-actions

    locked as resolved and limited conversation to collaborators on Sep 25, 2025