🌐 AI搜索 & 代理 主页
Skip to content

Commit 3fcddd6

Browse files
gibson042gibson042
authored
Dimensions: Detect and account for content-box dimension mishandling
Fixes gh-3699 Closes gh-3700
1 parent a6a28d2 commit 3fcddd6

File tree

3 files changed

+44
-16
lines changed

3 files changed

+44
-16
lines changed

‎src/css.js‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -148,10 +148,10 @@ function boxModelAdjustment( elem, dimension, box, isBorderBox, styles, computed
148148
function getWidthOrHeight( elem, dimension, extra ) {
149149

150150
// Start with computed style
151-
var valueIsBorderBox,
152-
styles = getStyles( elem ),
151+
var styles = getStyles( elem ),
153152
val = curCSS( elem, dimension, styles ),
154-
isBorderBox = jQuery.css( elem, "boxSizing", false, styles ) === "border-box";
153+
isBorderBox = jQuery.css( elem, "boxSizing", false, styles ) === "border-box",
154+
valueIsBorderBox = isBorderBox;
155155

156156
// Computed unit is not pixels. Stop here and return.
157157
if ( rnumnonpx.test( val ) ) {
@@ -160,7 +160,7 @@ function getWidthOrHeight( elem, dimension, extra ) {
160160

161161
// Check for style in case a browser which returns unreliable values
162162
// for getComputedStyle silently falls back to the reliable elem.style
163-
valueIsBorderBox = isBorderBox &&
163+
valueIsBorderBox = valueIsBorderBox &&
164164
( support.boxSizingReliable() || val === elem.style[ dimension ] );
165165

166166
// Fall back to offsetWidth/Height when value is "auto"
@@ -367,14 +367,26 @@ jQuery.each( [ "height", "width" ], function( i, dimension ) {
367367
set: function( elem, value, extra ) {
368368
var matches,
369369
styles = getStyles( elem ),
370+
isBorderBox = jQuery.css( elem, "boxSizing", false, styles ) === "border-box",
370371
subtract = extra && boxModelAdjustment(
371372
elem,
372373
dimension,
373374
extra,
374-
jQuery.css( elem, "boxSizing", false, styles ) === "border-box",
375+
isBorderBox,
375376
styles
376377
);
377378

379+
// Account for unreliable border-box dimensions by comparing offset* to computed and
380+
// faking a content-box to get border and padding (gh-3699)
381+
if ( isBorderBox && !support.borderBoxReliable() ) {
382+
subtract -= Math.ceil(
383+
elem[ "offset" + dimension[ 0 ].toUpperCase() + dimension.slice( 1 ) ] -
384+
parseFloat( styles[ dimension ] ) -
385+
boxModelAdjustment( elem, dimension, "border", false, styles ) -
386+
0.5
387+
);
388+
}
389+
378390
// Convert to pixels if value adjustment is needed
379391
if ( subtract && ( matches = rcssNum.exec( value ) ) &&
380392
( matches[ 3 ] || "px" ) !== "px" ) {

‎src/css/support.js‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,16 @@ define( [
3131

3232
// Support: Android 4.0 - 4.3 only, Firefox <=3 - 44
3333
reliableMarginLeftVal = divStyle.marginLeft === "2px";
34-
boxSizingReliableVal = divStyle.width === "4px";
34+
boxSizingReliableVal = divStyle.width === "5px";
35+
36+
// Support: IE 9 only
37+
// Detect misreporting of content dimensions for border-box elements (gh-3699)
38+
borderBoxReliableVal = divStyle.width[ 0 ] === "5";
3539

3640
// Support: Android 4.0 - 4.3 only
3741
// Some styles come back with percentage values, even though they shouldn't
3842
div.style.marginRight = "50%";
39-
pixelMarginRightVal = divStyle.marginRight === "4px";
43+
pixelMarginRightVal = divStyle.marginRight === "5px";
4044

4145
documentElement.removeChild( container );
4246

@@ -45,7 +49,8 @@ define( [
4549
div = null;
4650
}
4751

48-
var pixelPositionVal, boxSizingReliableVal, pixelMarginRightVal, reliableMarginLeftVal,
52+
var pixelPositionVal, boxSizingReliableVal, borderBoxReliableVal, pixelMarginRightVal,
53+
reliableMarginLeftVal,
4954
container = document.createElement( "div" ),
5055
div = document.createElement( "div" );
5156

@@ -60,19 +65,23 @@ define( [
6065
div.cloneNode( true ).style.backgroundClip = "";
6166
support.clearCloneStyle = div.style.backgroundClip === "content-box";
6267

63-
container.style.cssText = "border:0;width:8px;height:0;top:0;left:-9999px;" +
68+
container.style.cssText = "border:0;width:10px;height:0;top:0;left:-9999px;" +
6469
"padding:0;margin-top:1px;position:absolute";
6570
container.appendChild( div );
6671

6772
jQuery.extend( support, {
68-
pixelPosition: function() {
73+
borderBoxReliable: function() {
6974
computeStyleTests();
70-
return pixelPositionVal;
75+
return borderBoxReliableVal;
7176
},
7277
boxSizingReliable: function() {
7378
computeStyleTests();
7479
return boxSizingReliableVal;
7580
},
81+
pixelPosition: function() {
82+
computeStyleTests();
83+
return pixelPositionVal;
84+
},
7685
pixelMarginRight: function() {
7786
computeStyleTests();
7887
return pixelMarginRightVal;

‎test/unit/dimensions.js‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -585,7 +585,14 @@ QUnit.test( "interaction with scrollbars (gh-3589)", function( assert ) {
585585
.css( borderBox )
586586
.css( { "box-sizing": "border-box" } )
587587
.appendTo( parent ),
588-
$boxes = jQuery( [ plainContentBox[ 0 ], contentBox[ 0 ], borderBox[ 0 ] ] );
588+
$boxes = jQuery( [ plainContentBox[ 0 ], contentBox[ 0 ], borderBox[ 0 ] ] ),
589+
590+
// Support: IE 9 only
591+
// Computed width seems to report content width even with "box-sizing: border-box", and
592+
// "overflow: scroll" actually _shrinks_ the element (gh-3699).
593+
borderBoxLoss =
594+
borderBox.clone().css( { overflow: "auto" } ).appendTo( parent )[ 0 ].offsetWidth -
595+
borderBox[ 0 ].offsetWidth;
589596

590597
for ( i = 0; i < 3; i++ ) {
591598
if ( i === 1 ) {
@@ -616,13 +623,13 @@ QUnit.test( "interaction with scrollbars (gh-3589)", function( assert ) {
616623
assert.equal( contentBox.outerHeight(), size + 2 * padding + 2 * borderWidth,
617624
"content-box outerHeight includes scroll gutter" + suffix );
618625

619-
assert.equal( borderBox.innerWidth(), size - 2 * borderWidth,
626+
assert.equal( borderBox.innerWidth(), size - borderBoxLoss - 2 * borderWidth,
620627
"border-box innerWidth includes scroll gutter" + suffix );
621-
assert.equal( borderBox.innerHeight(), size - 2 * borderWidth,
628+
assert.equal( borderBox.innerHeight(), size - borderBoxLoss - 2 * borderWidth,
622629
"border-box innerHeight includes scroll gutter" + suffix );
623-
assert.equal( borderBox.outerWidth(), size,
630+
assert.equal( borderBox.outerWidth(), size - borderBoxLoss,
624631
"border-box outerWidth includes scroll gutter" + suffix );
625-
assert.equal( borderBox.outerHeight(), size,
632+
assert.equal( borderBox.outerHeight(), size - borderBoxLoss,
626633
"border-box outerHeight includes scroll gutter" + suffix );
627634
}
628635
} );

0 commit comments

Comments
 (0)