Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit3bbbc11

Browse files
authored
Dimensions: Add offset prop fallback to FF for unreliable TR dimensions
Firefox incorrectly (or perhaps correctly) includes table borders in computeddimensions, but they are the only one. Workaround this by testing for it andfalling back to offset propertiesFixesgh-4529Closesgh-4808
1 parent8969732 commit3bbbc11

File tree

4 files changed

+84
-26
lines changed

4 files changed

+84
-26
lines changed

‎src/css.js

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import swap from "./css/var/swap.js";
1212
importcurCSSfrom"./css/curCSS.js";
1313
importadjustCSSfrom"./css/adjustCSS.js";
1414
importfinalPropNamefrom"./css/finalPropName.js";
15+
importsupportfrom"./css/support.js";
1516

1617
import"./core/init.js";
1718
import"./core/ready.js";
@@ -134,23 +135,24 @@ function getWidthOrHeight( elem, dimension, extra ) {
134135
}
135136

136137

137-
if((isIE&&
138-
(
139-
140-
// Support: IE 9 - 11+
141-
// Use offsetWidth/offsetHeight for when box sizing is unreliable.
142-
// In those cases, the computed value can be trusted to be border-box.
143-
isBorderBox||
144-
145-
// Support: IE 10 - 11+
146-
// IE misreports `getComputedStyle` of table rows with width/height
147-
// set in CSS while `offset*` properties report correct values.
148-
nodeName(elem,"tr")
149-
)||
138+
if((
150139

151140
// Fall back to offsetWidth/offsetHeight when value is "auto"
152141
// This happens for inline elements with no explicit setting (gh-3571)
153-
val==="auto")&&
142+
val==="auto"||
143+
144+
// Support: IE 9 - 11+
145+
// Use offsetWidth/offsetHeight for when box sizing is unreliable.
146+
// In those cases, the computed value can be trusted to be border-box.
147+
(isIE&&isBorderBox)||
148+
149+
// Support: IE 10 - 11+
150+
// IE misreports `getComputedStyle` of table rows with width/height
151+
// set in CSS while `offset*` properties report correct values.
152+
// Support: Firefox 70+
153+
// Firefox includes border widths
154+
// in computed dimensions for table rows. (gh-4529)
155+
(!support.reliableTrDimensions()&&nodeName(elem,"tr")))&&
154156

155157
// Make sure the element is visible & connected
156158
elem.getClientRects().length){

‎src/css/support.js

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
importdocumentfrom"../var/document.js";
2+
importdocumentElementfrom"../var/documentElement.js";
3+
importsupportfrom"../var/support.js";
4+
5+
(function(){
6+
7+
varreliableTrDimensionsVal,
8+
div=document.createElement("div");
9+
10+
// Finish early in limited (non-browser) environments
11+
if(!div.style){
12+
return;
13+
}
14+
15+
// Support: IE 10 - 11+
16+
// IE misreports `getComputedStyle` of table rows with width/height
17+
// set in CSS while `offset*` properties report correct values.
18+
// Support: Firefox 70+
19+
// Only Firefox includes border widths
20+
// in computed dimensions. (gh-4529)
21+
support.reliableTrDimensions=function(){
22+
vartable,tr,trStyle;
23+
if(reliableTrDimensionsVal==null){
24+
table=document.createElement("table");
25+
tr=document.createElement("tr");
26+
27+
table.style.cssText="position:absolute;left:-11111px;border-collapse:separate";
28+
tr.style.cssText="border:1px solid";
29+
30+
// Support: Chrome 86+
31+
// Height set through cssText does not get applied.
32+
// Computed height then comes back as 0.
33+
tr.style.height="1px";
34+
div.style.height="9px";
35+
36+
documentElement
37+
.appendChild(table)
38+
.appendChild(tr)
39+
.appendChild(div);
40+
41+
trStyle=window.getComputedStyle(tr);
42+
reliableTrDimensionsVal=(parseInt(trStyle.height,10)+
43+
parseInt(trStyle.borderTopWidth,10)+
44+
parseInt(trStyle.borderBottomWidth,10))===tr.offsetHeight;
45+
46+
documentElement.removeChild(table);
47+
}
48+
returnreliableTrDimensionsVal;
49+
};
50+
})();
51+
52+
exportdefaultsupport;

‎test/unit/dimensions.js

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -627,13 +627,7 @@ QUnit.test( "width/height on an inline element with percentage dimensions (gh-36
627627
}
628628
);
629629

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

‎test/unit/support.js

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -58,11 +58,21 @@ testIframe(
5858
varexpected,
5959
userAgent=window.navigator.userAgent,
6060
expectedMap={
61-
ie_11:{},
62-
chrome:{},
63-
safari:{},
64-
firefox:{},
65-
ios:{}
61+
ie_11:{
62+
"reliableTrDimensions":false
63+
},
64+
chrome:{
65+
"reliableTrDimensions":true
66+
},
67+
safari:{
68+
"reliableTrDimensions":true
69+
},
70+
firefox:{
71+
"reliableTrDimensions":false
72+
},
73+
ios:{
74+
"reliableTrDimensions":true
75+
}
6676
};
6777

6878
if(document.documentMode){

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp