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

CSS: Make .css("width") & .css("height") return fractional values

Browse Source 
Fixes gh-1724
Closes gh-2454
Refs gh-2439
This commit is contained in:
Michał Gołębiowski
2015-07-02 01:20:18 +02:00
parent 203979d153
commit 23212b34e6
5 changed files with 117 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/css.js
View File

@@ -115,21 +115,28 @@ function augmentWidthOrHeight( elem, name, extra, isBorderBox, styles ) {
function getWidthOrHeight( elem, name, extra ) {
// Start with offset property, which is equivalent to the border-box value
var valueIsBorderBox = true,
val = name === "width" ? elem.offsetWidth : elem.offsetHeight,
var val,
valueIsBorderBox = true,
styles = getStyles( elem ),
isBorderBox = jQuery.css( elem, "boxSizing", false, styles ) === "border-box";
if ( support.gBCRDimensions() ) {
// Support: IE <= 11 only
// Running getBoundingClientRect on a disconnected node
// in IE throws an error.
if ( elem.getClientRects().length ) {
val = elem.getBoundingClientRect()[ name ];
}
} else {
// In IE8 gBCR doesn't report width & height; we need to fall back to offset*.
val = name === "width" ? elem.offsetWidth : elem.offsetHeight;
}
// Support: IE11 only
// In IE 11 fullscreen elements inside of an iframe have
// 100x too small dimensions (gh-1764).
if ( document.msFullscreenElement && window.top !== window ) {
// Support: IE11 only
// Running getBoundingClientRect on a disconnected node
// in IE throws an error.
if ( elem.getClientRects().length ) {
val = Math.round( elem.getBoundingClientRect()[ name ] * 100 );
}
val *= 100;
}
// some non-html elements return undefined for offsetWidth, so check for null/undefined
@@ -320,7 +327,13 @@ jQuery.each([ "height", "width" ], function( i, name ) {
// certain elements can have dimension info if we invisibly show them
// however, it must have a current display style that would benefit from this
return rdisplayswap.test( jQuery.css( elem, "display" ) ) &&
elem.offsetWidth === 0 ?
// Support: Safari 8+
// Table columns in Safari have non-zero offsetWidth & zero
// getBoundingClientRect().width unless display is changed.
// Support: IE <= 11 only
// Running getBoundingClientRect on a disconnected node
// in IE throws an error.
( !elem.getClientRects().length || !elem.getBoundingClientRect().width ) ?
swap( elem, cssShow, function() {
return getWidthOrHeight( elem, name, extra );
}) :

15
src/css/support.js
View File

@@ -4,8 +4,8 @@ define([
], function( jQuery, support ) {
(function() {
var div, container, style, a, pixelPositionVal, boxSizingReliableVal, pixelMarginRightVal,
reliableHiddenOffsetsVal, reliableMarginRightVal;
var div, container, style, a, pixelPositionVal, boxSizingReliableVal, gBCRDimensionsVal,
pixelMarginRightVal, reliableHiddenOffsetsVal, reliableMarginRightVal;
// Setup
div = document.createElement( "div" );
@@ -55,6 +55,13 @@ define([
return boxSizingReliableVal;
},
gBCRDimensions: function() {
if ( pixelPositionVal == null ) {
computeStyleTests();
}
return gBCRDimensionsVal;
},
pixelMarginRight: function() {
// Support: Android 4.0-4.3
if ( pixelPositionVal == null ) {
@@ -105,6 +112,10 @@ define([
pixelPositionVal = boxSizingReliableVal = false;
pixelMarginRightVal = reliableMarginRightVal = true;
// Support: IE<9
// In IE8 gBCR doesn't report width & height.
gBCRDimensionsVal = !!div.getBoundingClientRect().width;
// Check for getComputedStyle so that this code is not run in IE<9.
if ( window.getComputedStyle ) {
divStyle = window.getComputedStyle( div );