NOTE. The following is the update. I will most likely change the description, since this is not a getComputedStyle problem, this is actually a problem with print media and the fact that Internet Explorer now supports the document. StyleSheets []. cssRules.
I got a little confused about this as I thought it worked, and I'm not sure if it just broke. I am using getComputedStyle, which I thought was support in all modern browsers, but I do not get the expected response from 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 that I am interested in calculating calculated CSS. This is something 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 "elem" h1 and:
If I set "h1" style = "background-color: rgb (238, 238, 238)"; The calculated background color correctly returns in IE 11, Chrome, Firefox
If, however, I set the style to "h1" in CSS as follows:
h1{ border-top:3px solid #111111; background-color:rgb(238, 238, 238); font-size:30px; padding:3px 10px 3px 0px; }
The calculated background color only in IE is returned as transparent. Chrome and Firefox have no problem.
Even stranger in this example, the “attributes” also contain border entries, such as borderTopColor, and which are correctly calculated using this code in all browsers, including IE.
This page is here:
http://www.cloudformatter.com/CSS2Pdf
The code starts when you select the "PDF Output" button.
If you format it using Chrome, the “h1” at the top of the page in the resulting PDF file will have a silver background, because the background color will be obtained in getComputedStyle. There will also be a border post. But if you format in IE11, the background color will be absent because it will be returned as “transparent”, but the border will be there, and both of them are set in css.
You can see similar behavior here http://www.cloudformatter.com/CSS2Pdf.Demos.InlineElements
Field "Exception" is 100% in css. The border works, but the color and image are not the way they are missing. The font color is also missing because it is set in CSS ... but not everything in CSS is ignored. I even added some console entries (on the left - IE, namely 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 does getComputedStyle not work for IE 11 for something in external CSS?
UPDATE:
After hours and hours, I highlighted the problem as NOT getComputedStyle. It turns out IE works and actually does it, as we expected in our coding. Other browsers had problems that we have not noticed so far.
The code uses document.styleSheets []. cssRules to iterate over all CSS and extract media directives for use in PDF formatting. One of these linked CSS files on the remote server is “bootstrap.min.css” and is buried inside it — these are CSS rules such as background, all black text, etc.
Well, if you run the code in Firefox and try to access cssRules, it was actually a caught security bug, so they are not readable. In Chrome, it does not throw any (obvious) error, but returns "null". Thus, these browsers "worked" because these CSS rules were never read.
In addition, IE is low, and now, it supports it. It reads values from remote CSS without crashes or security warnings. And because of this, CSS from "bootstrap.min.css" was applied to do all this.
So, to fix this for all browsers, I only had to follow the tips:
Access a cross-domain style table with .cssRules
And then implement the rules to skip print material in specific files (e.g. bootstrap.min.css)