github/jquery
1
1
Fork 0
mirror of https://github.com/jquery/jquery.git synced 2026-04-20 03:01:22 -04:00
Code Issues Packages Projects Releases Wiki Activity

Dimensions: Detect and account for content-box dimension mishandling

Browse Source 
Fixes gh-3699
Closes gh-3700
This commit is contained in:
Richard Gibson
2017-07-10 12:35:03 -04:00
committed by GitHub
parent a6a28d24c1
commit 3fcddd6e72
3 changed files with 44 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/css.js
View File

@@ -148,10 +148,10 @@ function boxModelAdjustment( elem, dimension, box, isBorderBox, styles, computed
function getWidthOrHeight( elem, dimension, extra ) {
// Start with computed style
var valueIsBorderBox,
styles = getStyles( elem ),
var styles = getStyles( elem ),
val = curCSS( elem, dimension, styles ),
isBorderBox = jQuery.css( elem, "boxSizing", false, styles ) === "border-box";
isBorderBox = jQuery.css( elem, "boxSizing", false, styles ) === "border-box",
valueIsBorderBox = isBorderBox;
// Computed unit is not pixels. Stop here and return.
if ( rnumnonpx.test( val ) ) {
@@ -160,7 +160,7 @@ function getWidthOrHeight( elem, dimension, extra ) {
// Check for style in case a browser which returns unreliable values
// for getComputedStyle silently falls back to the reliable elem.style
valueIsBorderBox = isBorderBox &&
valueIsBorderBox = valueIsBorderBox &&
( support.boxSizingReliable() || val === elem.style[ dimension ] );
// Fall back to offsetWidth/Height when value is "auto"
@@ -367,14 +367,26 @@ jQuery.each( [ "height", "width" ], function( i, dimension ) {
set: function( elem, value, extra ) {
var matches,
styles = getStyles( elem ),
isBorderBox = jQuery.css( elem, "boxSizing", false, styles ) === "border-box",
subtract = extra && boxModelAdjustment(
elem,
dimension,
extra,
jQuery.css( elem, "boxSizing", false, styles ) === "border-box",
isBorderBox,
styles
);
// Account for unreliable border-box dimensions by comparing offset* to computed and
// faking a content-box to get border and padding (gh-3699)
if ( isBorderBox && !support.borderBoxReliable() ) {
subtract -= Math.ceil(
elem[ "offset" + dimension[ 0 ].toUpperCase() + dimension.slice( 1 ) ] -
parseFloat( styles[ dimension ] ) -
boxModelAdjustment( elem, dimension, "border", false, styles ) -
0.5
);
}
// Convert to pixels if value adjustment is needed
if ( subtract && ( matches = rcssNum.exec( value ) ) &&
( matches[ 3 ] || "px" ) !== "px" ) {

21
src/css/support.js
View File

@@ -31,12 +31,16 @@ define( [
// Support: Android 4.0 - 4.3 only, Firefox <=3 - 44
reliableMarginLeftVal = divStyle.marginLeft === "2px";
boxSizingReliableVal = divStyle.width === "4px";
boxSizingReliableVal = divStyle.width === "5px";
// Support: IE 9 only
// Detect misreporting of content dimensions for border-box elements (gh-3699)
borderBoxReliableVal = divStyle.width[ 0 ] === "5";
// Support: Android 4.0 - 4.3 only
// Some styles come back with percentage values, even though they shouldn't
div.style.marginRight = "50%";
pixelMarginRightVal = divStyle.marginRight === "4px";
pixelMarginRightVal = divStyle.marginRight === "5px";
documentElement.removeChild( container );
@@ -45,7 +49,8 @@ define( [
div = null;
}
var pixelPositionVal, boxSizingReliableVal, pixelMarginRightVal, reliableMarginLeftVal,
var pixelPositionVal, boxSizingReliableVal, borderBoxReliableVal, pixelMarginRightVal,
reliableMarginLeftVal,
container = document.createElement( "div" ),
div = document.createElement( "div" );
@@ -60,19 +65,23 @@ define( [
div.cloneNode( true ).style.backgroundClip = "";
support.clearCloneStyle = div.style.backgroundClip === "content-box";
container.style.cssText = "border:0;width:8px;height:0;top:0;left:-9999px;" +
container.style.cssText = "border:0;width:10px;height:0;top:0;left:-9999px;" +
"padding:0;margin-top:1px;position:absolute";
container.appendChild( div );
jQuery.extend( support, {
pixelPosition: function() {
borderBoxReliable: function() {
computeStyleTests();
return pixelPositionVal;
return borderBoxReliableVal;
},
boxSizingReliable: function() {
computeStyleTests();
return boxSizingReliableVal;
},
pixelPosition: function() {
computeStyleTests();
return pixelPositionVal;
},
pixelMarginRight: function() {
computeStyleTests();
return pixelMarginRightVal;