javascript - Using getComputedStyle with IE 11 -


note: has update below. change description not getcomputedstyle issue, issue print-media , fact internet explorer supports document.stylesheets[].cssrules.

i bit confused on thought worked , not sure broke. using getcomputedstyle thought support in modern browsers, not expected answer ie 11. given 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" array of names interested in getting computed css for. 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 problem seem have "backgroundcolor".

if pass in "elem" h1 and:

if set on "h1" style="background-color:rgb(238, 238, 238);" computed background color returned correctly in ie 11, chrome, firefox

if set "h1" style in css 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 returned transparent. chrome , firefox not have problem.

even more strange in sample, "attributes" contains entries border bordertopcolor , is correctly computed code in browsers including ie.

the page in question here:

http://www.cloudformatter.com/css2pdf

the code runs when selecting "out pdf" button.

if format chrome, "h1" @ top of page in resulting pdf have silver background because background-color picked in getcomputedstyle. border-top there. if format in ie11 background-color missing because returned "transparent" border there , both of these set in css.

similar behavior can see here http://www.cloudformatter.com/css2pdf.demos.inlineelements

the "exception" box 100% in css. border works color , image not missing. font color missing set in css ... not in css ignored. added few console write's (left ie, right chrome).

enter image description here

in above code, have tried far , ie returns "transparent" background-color returns correct color 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, missing here or getcomputedstyle not working ie 11 something's in external css?

update:

after hours , hours have isolated issue not being getcomputedstyle. turns out ie is working , in fact doing expected in our coding. other browsers had issues had not noted until now.

the code uses document.stylesheets[].cssrules iterate on css , extract print media directives apply pdf formatting. 1 of linked css files on remote server "bootstrap.min.css" , buried within css rules no background, black text, etc.

well, if run code in firefox , try access cssrules, caught security error not read. on chrome, not throw (obvious) error returns "null". these browsers "worked" because these css rules never read.

along comes ie , low , behold, supports it. reads values remote css without failing or security warning. , because of that, css "bootstrap.min.css" stuff being applied.

so, fix browsers needed follow advice here:

accessing cross-domain style sheet .cssrules

and implement rules skip print media in files (like bootstrap.min.css)

just question closed out, can examine question above update.

as turns out, recent version of internet explorer supports document.stylesheets[] , more importantly supports extracting cssstyles stylesheets no matter if hosted locally or remotely.

this change caused our code start reading remotely hosted css style not read , not noticed because errors in chrome , firefox.

so getting access remotely hosted css stylesheets object not require internet explorer (it works without changes) require 1 different in chrome , firefox (like setting crossorigin="anonymous" on link tag).


Comments

Post a Comment

Popular posts from this blog

c# - Validate object ID from GET to POST -

i have method allows user access comment have made on site. have post method lets them update comment. my normal solution send entire comment model through, let them update it, update on database when post back. involve sending commentid through in hiddenfor , can manipulated. how can verify commentid sent in get method same i'm getting in post , not able alter comment wish? how can verify commentid sent in method same i'm getting in post? basically have validate following things in post - user logged-in user. authenticated users post comments. commentid in post , should valid commentid , should present in database. userid associated logged-in user should same userid associated comment . comment should contain userid column, can check @ time of update. to make sure update happens comment has been sent in get - hold commentid in session , in post action compare commentid value in session .
Read more

node.js - Custom Model Validator SailsJS -

when using custom model validator checks record within model. return within spread doesn't seem end control flow. //post.js model /** * custom validator **/ types: { isuservalid: function(user_id) { var promise = require('bluebird'); promise.all([ user.findone({id: user_id}) ]) .spread(function(user) { console.log(user); if (user === null || user === undefined) { console.log('failed'); return false; }else{ console.log('passed'); return true; } }); } }, my response standard validation failed response. { "error": "e_validation", "status": 400, "summary": "1 attribute invalid", "model": "post", "invalidattributes": { "owner": [ { "rule": "isuservalid", ...
Read more

php - Find a regex to take part of Email -

i have following emails need extract part from: bestellnummer xxx: 1 von xxx, 1er pack ------------- anfang der nachricht ------------- foo bar baz foo bar baz // <<<<< need text here ------------- ende der nachricht ------------- ------------- anfang der nachricht ------------- foo bar baz foo bar baz ------------- ende der nachricht ------------- there 0 unlimited occurences of ------------- anfang der nachricht ------------- ------------- ende der nachricht ------------- and i'm able extract first part regex: $re = "/------------- .*? -------------.?(.*?).?------------- .*? -------------/s"; but, i'm quite new on learning regex, i'm pretty sure there must better regex extract part (foo bar baz foo bar baz) of text between ------------- anfang der nachricht ------------- ------------- ende der nachricht ------------- as can in different languages, i'm using .? to match between hyphens. i...
Read more