IE11 Member not found fix Wrap accesing the cssText property in a try...catch

[simonpinn]

#1374

Reproduced the above issue and located the cause, it happens in the createElementClone function when it attempts to access the cssText property, for some reason when using font-awesome, an element with fa-spin throws this error in IE when accessing the property.

Wrapping the property access in a try catch solves the immediate issue.

[davesmith9088]

I was having the same error in IE11, until I saw this issue and the try..catch worked for me as well. I wasn't using font-awesome, not sure exactly what was triggering it.

[akalinux]

So when will the next release be out? I am having the same issue with IE11

[simonpinn]

@akalinux - I've asked @niklasvh to have a look at a regression that causes a failing rendering test #1374 - unless you are familiar with the unit tests?

[NielsSkovgaard]

Your code gave various Console errors in IE11, however this doesn't:

            if (node instanceof HTMLStyleElement && node.sheet && node.sheet.cssRules) {
                let self = this;
                var css = [].slice.call(node.sheet.cssRules, 0).reduce(function (css, rule) {
                    try {
                        if (rule && rule.cssText) {
                            return css + rule.cssText;
                        }
                        return css;
                    } catch (err) {
                        self.logger.log('Unable to access cssText property', rule.name);
                        return css;
                    }
                }, '');
                var style = node.cloneNode(false);
                style.textContent = css;
                return style;
            }

Now, the above will log the following in the Console i.e. there seems to be a problem with the Flatpickr (date picker) in my project, which is solved by the try...catch above:

html2canvas: Unable to access cssText property fpFadeInDown

[cyouden]

I think you just need to add an empty string as your initial value on the call to reduce (according to MDN: "Calling reduce() on an empty array without an initial value is an error."). The call to reduce in the original code has that, and trying to use this patch locally in a project throws exceptions until I added that. Tests seem to be passing locally as well with that addition.

[xiaocoati]

@simonpinn Hello! I use the latest version 1.0.0-rc.0, but also has the same problem in IE11.

[niklasvh]

@xiaocoati can you share an example that replicates it on jsfiddle?

[xiaocoati]

@xiaocoati can you share an example that replicates it on jsfiddle?

Hello niklasvh! Because I'm in China, I can't open jsfiddle, so I make an example on JSRUN https://jsrun.net/uJXKp

[xiaocoati]

@niklasvh And because the project is the company project, so I can't put it on github, so I make another simple example. But the strange thing is, now I cannot reproduce the same problem which happened in my company project, but I meet a new problem in IE11 "The data area passed to the system call is too small". Can you please have a look?

[xiaocoati]

@niklasvh I have make an example used version 1.0.0-rc.1, but still has the problem in IE11. The attached ZIP file is my demo, you can download it, run npm install,
npm run mock and npm run dev . Can you please have a look? Really apreaciate!
demo.zip

[wugel]

@niklasvh I have the sam problem using version 1.0.0-rc.1 in IE11.
Thank you for help

[xszh]

@niklasvh I also meet the probelm using version 1.0.0-rc.1 in IE 11.
When checking the PRs of src/Clone.js, there was a merge #1693 about 21days ago. It looks like the try catch now will throw everything except "SecurityError". So the exception throw by IE(member not found) will be throw again and then everything stoped.
Would you take a look? Thanks a lot