NOTE: This has an update below. I will likely change description as it is not a getComputedStyle issue, it is an issue actually with print-media and the fact that Internet Explorer now supports document.styleSheets[].cssRules.
I am a bit confused on this as I thought this worked and I am not sure it just recently broke. I am using getComputedStyle which I thought was support in all modern browsers, but I do not get the expected answer with IE 11. Given this code:
getRealStyle: function(elm, attributes) {
var returnObj = {};
var computed = getComputedStyle(elm);
for(var i=0; i<attributes.length; i++) {
returnObj[attributes[i]] = computed[attributes[i]];
}
return returnObj;
},
Where "attributes" is an array of names which I am interested in getting the computed CSS for. It is like this:
attributes: [
'lineHeight',
'alignmentBaseline',
'backgroundImage', 'backgroundPosition', 'backgroundRepeat', 'backgroundColor',
'baselineShift',
'borderTopWidth','borderTopStyle','borderTopColor',
'borderBottomWidth','borderBottomStyle','borderBottomColor',
'borderLeftWidth','borderLeftStyle','borderLeftColor',
'borderRightWidth','borderRightStyle','borderRightColor',
'borderCollapse',
'clear', 'color',
'display', 'direction', 'dominantBaseline',
'fill', 'float',
'fontStyle', 'fontVariant', 'fontWeight', 'fontSize', 'fontFamily',
'height',
'listStyleType', 'listStyleImage',
'marginTop', 'marginBottom', 'marginLeft', 'marginRight','orphans',
'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft',
'pageBreakAfter', 'pageBreakBefore',
'stroke', 'strokeWidth',
'strokeOpacity', 'fillOpacity',
'tableLayout',
'textAlign', 'textAnchor','textDecoration', 'textIndent', 'textTransform', 'textShadow',
'verticalAlign',
'widows', 'width'],
The only problem I seem to have is "backgroundColor".
If I pass in an "elem" h1 and:
If I set on the "h1" style="background-color:rgb(238, 238, 238);" The computed background color is returned correctly in IE 11, Chrome, Firefox
If however I set the "h1" style in CSS like this:
h1{
border-top:3px solid #111111;
background-color:rgb(238, 238, 238);
font-size:30px;
padding:3px 10px 3px 0px;
}
The computed background-color in IE only is returned as transparent. Chrome and Firefox do not have his problem.
Even more strange in that sample, "attributes" also contains entries for the border like borderTopColor and that is correctly computed with that code in all browsers including IE.
The page in question is here:
http://www.cloudformatter.com/CSS2Pdf
The code runs when selecting the "Out PDF" button.
If you format this with Chrome, the "h1" at the top of the page in the resulting PDF will have the silver background because the background-color is picked up in getComputedStyle. The border-top will also be there. But if you format in IE11 the background-color will be missing because it is returned as "transparent" but the border will be there and both of these are set in the css.
Similar behavior you can see here http://www.cloudformatter.com/CSS2Pdf.Demos.InlineElements
The "Exception" box is 100% in css. The border works but the color and image does not as they are missing. The font color is also missing as that is set in CSS ... but not everything in CSS is ignored. I even added a few console write's (left is IE, right is Chrome).
IN the above code, I have tried this so far and IE returns "transparent" for the background-color BUT returns the correct color for the border:
getRealStyle: function(elm, attributes) {
var returnObj = {};
var computed = getComputedStyle(elm);
if (elm.localName == 'h1'){
console.log('***** ' + elm.localName + ' *****');
console.log('BackgroundColor: ' + computed.backgroundColor);
console.log('PropValue: ' + computed.getPropertyValue('background-color'));
console.log('BorderTopColor: ' + computed.borderTopColor);
}
for(var i=0; i<attributes.length; i++) {
returnObj[attributes[i]] = computed[attributes[i]];
}
return returnObj;
},
So, am I missing something here or is getComputedStyle not working for IE 11 for something's in external CSS?
UPDATE:
After hours and hours I have isolated the issue as NOT being getComputedStyle. It turns out that IE is working and in fact doing so as we expected in our coding. It is the other browsers that had issues we had not noted until now.
The code uses document.styleSheets[].cssRules to iterate over all CSS and extract print media directives to apply for the PDF formatting. One of those linked CSS files on a remote server is "bootstrap.min.css" and buried within it were CSS rules like no background, all black text, etc.
Well, if you run the code in Firefox and try to access the cssRules, it was actually a caught security error so they are not read. On Chrome, it does not throw any (obvious) error but returns "null". So these browsers "worked" because these CSS rules were never read.
Along comes IE and low and behold, it supports it. It reads the values from a remote CSS without failing or security warning. And because of that, the CSS from "bootstrap.min.css" to do all that stuff was being applied.
So, to fix this for all browsers I only needed to follow the advice here:
Accessing cross-domain style sheet with .cssRules
And then implement rules to skip the print media in certain files (like bootstrap.min.css)
