Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

use native getComputedStyle on IE9 and IE10 #2419

Closed
wants to merge 1 commit into from

2 participants

@gonchuki
Collaborator

this is a robustness enhancement as discussed on #2414 (comment)

This relegates the use of non-standard currentStyle to oldIE and Opera (which has a bug where sub-pixel values get rounded on native getComputedStyle, which can create jerky animations)

As you see this also finally kills the usage of browser.* sniffs on getStyle

@gonchuki gonchuki commented on the diff
Source/Element/Element.Style.js
@@ -32,6 +32,19 @@ var returnsBordersInWrongOrder = el.style.border != border;
el = null;
//</ltIE9>
+var hasGetComputedStyle = !!window.getComputedStyle,
+ brokenGetComputedStyle; // Opera rounds sub-pixel values
+
+if (hasGetComputedStyle){
+ var el = document.createElement('div');
+ el.style.display = 'none';
+ el.style.paddingLeft = '1.5px';
+ document.html.appendChild(el);
@gonchuki Collaborator

appending this here as the body might not exist yet at this point of the code execution (if js was included in head) and Opera returns empty values for window.getComputedStyle on a detached node.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@arian
Owner

Looks good.

@arian arian closed this in 5812b7d
@gonchuki gonchuki referenced this pull request in mootools/mootools-more
Closed

document.body.mask() no longer blocks with IE11 #1222

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Aug 29, 2012
  1. @gonchuki
This page is out of date. Refresh to see the latest.
Showing with 20 additions and 7 deletions.
  1. +20 −7 Source/Element/Element.Style.js
View
27 Source/Element/Element.Style.js
@@ -32,6 +32,19 @@ var returnsBordersInWrongOrder = el.style.border != border;
el = null;
//</ltIE9>
+var hasGetComputedStyle = !!window.getComputedStyle,
+ brokenGetComputedStyle; // Opera rounds sub-pixel values
+
+if (hasGetComputedStyle){
+ var el = document.createElement('div');
+ el.style.display = 'none';
+ el.style.paddingLeft = '1.5px';
+ document.html.appendChild(el);
@gonchuki Collaborator

appending this here as the body might not exist yet at this point of the code execution (if js was included in head) and Opera returns empty values for window.getComputedStyle on a detached node.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ brokenGetComputedStyle = window.getComputedStyle(el, null).paddingLeft != el.style.paddingLeft;
+ document.html.removeChild(el);
+ el = null;
+}
+
Element.Properties.styles = {set: function(styles){
this.setStyles(styles);
}};
@@ -87,7 +100,7 @@ var floatName = (html.style.cssFloat == null) ? 'styleFloat' : 'cssFloat',
Element.implement({
getComputedStyle: function(property){
- if (this.currentStyle) return this.currentStyle[property.camelCase()];
+ if ((!hasGetComputedStyle || brokenGetComputedStyle) && this.currentStyle) return this.currentStyle[property.camelCase()];
var defaultView = Element.getDocument(this).defaultView,
computed = defaultView ? defaultView.getComputedStyle(this, null) : null;
return (computed) ? computed.getPropertyValue((property == floatName) ? 'float' : property.hyphenate()) : '';
@@ -141,7 +154,7 @@ Element.implement({
var color = result.match(/rgba?\([\d\s,]+\)/);
if (color) result = result.replace(color[0], color[0].rgbToHex());
}
- if (Browser.opera || Browser.ie){
+ if (!hasGetComputedStyle || brokenGetComputedStyle){
if ((/^(height|width)$/).test(property) && !(/px$/.test(result))){
var values = (property == 'width') ? ['left', 'right'] : ['top', 'bottom'], size = 0;
values.each(function(value){
@@ -152,12 +165,12 @@ Element.implement({
if ((/^border(.+)Width|margin|padding/).test(property) && isNaN(parseFloat(result))){
return '0px';
}
- //<ltIE9>
- if (returnsBordersInWrongOrder && /^border(Top|Right|Bottom|Left)?$/.test(property) && /^#/.test(result)){
- return result.replace(/^(.+)\s(.+)\s(.+)$/, '$2 $3 $1');
- }
- //</ltIE9>
}
+ //<ltIE9>
+ if (returnsBordersInWrongOrder && /^border(Top|Right|Bottom|Left)?$/.test(property) && /^#/.test(result)){
+ return result.replace(/^(.+)\s(.+)\s(.+)$/, '$2 $3 $1');
+ }
+ //</ltIE9>
return result;
},
Something went wrong with that request. Please try again.