Skip to content

Commit

Permalink
Dimensions: Add offset prop fallback to FF for unreliable TR dimensions
Browse files Browse the repository at this point in the history
Firefox incorrectly (or perhaps correctly) includes table borders in computed
dimensions, but they are the only one. Workaround this by testing for it and
falling back to offset properties

Fixes gh-4529
Closes gh-4808
  • Loading branch information
timmywil committed Jan 11, 2021
1 parent 8969732 commit 3bbbc11
Show file tree
Hide file tree
Showing 4 changed files with 84 additions and 26 deletions.
30 changes: 16 additions & 14 deletions src/css.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import swap from "./css/var/swap.js";
import curCSS from "./css/curCSS.js";
import adjustCSS from "./css/adjustCSS.js";
import finalPropName from "./css/finalPropName.js";
import support from "./css/support.js";

import "./core/init.js";
import "./core/ready.js";
Expand Down Expand Up @@ -134,23 +135,24 @@ function getWidthOrHeight( elem, dimension, extra ) {
}


if ( ( isIE &&
(

// Support: IE 9 - 11+
// Use offsetWidth/offsetHeight for when box sizing is unreliable.
// In those cases, the computed value can be trusted to be border-box.
isBorderBox ||

// Support: IE 10 - 11+
// IE misreports `getComputedStyle` of table rows with width/height
// set in CSS while `offset*` properties report correct values.
nodeName( elem, "tr" )
) ||
if ( (

// Fall back to offsetWidth/offsetHeight when value is "auto"
// This happens for inline elements with no explicit setting (gh-3571)
val === "auto" ) &&
val === "auto" ||

// Support: IE 9 - 11+
// Use offsetWidth/offsetHeight for when box sizing is unreliable.
// In those cases, the computed value can be trusted to be border-box.
( isIE && isBorderBox ) ||

// Support: IE 10 - 11+
// IE misreports `getComputedStyle` of table rows with width/height
// set in CSS while `offset*` properties report correct values.
// Support: Firefox 70+
// Firefox includes border widths
// in computed dimensions for table rows. (gh-4529)
( !support.reliableTrDimensions() && nodeName( elem, "tr" ) ) ) &&

// Make sure the element is visible & connected
elem.getClientRects().length ) {
Expand Down
52 changes: 52 additions & 0 deletions src/css/support.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import document from "../var/document.js";
import documentElement from "../var/documentElement.js";
import support from "../var/support.js";

( function() {

var reliableTrDimensionsVal,
div = document.createElement( "div" );

// Finish early in limited (non-browser) environments
if ( !div.style ) {
return;
}

// Support: IE 10 - 11+
// IE misreports `getComputedStyle` of table rows with width/height
// set in CSS while `offset*` properties report correct values.
// Support: Firefox 70+
// Only Firefox includes border widths
// in computed dimensions. (gh-4529)
support.reliableTrDimensions = function() {
var table, tr, trStyle;
if ( reliableTrDimensionsVal == null ) {
table = document.createElement( "table" );
tr = document.createElement( "tr" );

table.style.cssText = "position:absolute;left:-11111px;border-collapse:separate";
tr.style.cssText = "border:1px solid";

// Support: Chrome 86+
// Height set through cssText does not get applied.
// Computed height then comes back as 0.
tr.style.height = "1px";
div.style.height = "9px";

documentElement
.appendChild( table )
.appendChild( tr )
.appendChild( div );

trStyle = window.getComputedStyle( tr );
reliableTrDimensionsVal = ( parseInt( trStyle.height, 10 ) +
parseInt( trStyle.borderTopWidth, 10 ) +
parseInt( trStyle.borderBottomWidth, 10 ) ) === tr.offsetHeight;

documentElement.removeChild( table );
}
return reliableTrDimensionsVal;
};
} )();

export default support;
8 changes: 1 addition & 7 deletions test/unit/dimensions.js
Original file line number Diff line number Diff line change
Expand Up @@ -627,13 +627,7 @@ QUnit.test( "width/height on an inline element with percentage dimensions (gh-36
}
);

// Support: Firefox 70+
// Firefox 70 & newer fail this test but the issue there is more profound - Firefox doesn't
// subtract borders from table row computed widths.
// See https://github.com/jquery/jquery/issues/4529
// See https://bugzilla.mozilla.org/show_bug.cgi?id=1590837
// See https://github.com/w3c/csswg-drafts/issues/4444
QUnit[ /firefox/i.test( navigator.userAgent ) ? "skip" : "test" ](
QUnit.test(
"width/height on a table row with phantom borders (gh-3698)", function( assert ) {
assert.expect( 4 );

Expand Down
20 changes: 15 additions & 5 deletions test/unit/support.js
Original file line number Diff line number Diff line change
Expand Up @@ -58,11 +58,21 @@ testIframe(
var expected,
userAgent = window.navigator.userAgent,
expectedMap = {
ie_11: {},
chrome: {},
safari: {},
firefox: {},
ios: {}
ie_11: {
"reliableTrDimensions": false
},
chrome: {
"reliableTrDimensions": true
},
safari: {
"reliableTrDimensions": true
},
firefox: {
"reliableTrDimensions": false
},
ios: {
"reliableTrDimensions": true
}
};

if ( document.documentMode ) {
Expand Down

0 comments on commit 3bbbc11

Please sign in to comment.