Deckgrid does not work in IE11

[GaryWenneker]

a client reminded me of a page not rendering. when looking further it showed that Chrome, FF etc were working fine. I found out that it had to do with the initialization of the content variable. before parsing the content var I added a console.log(content) and suddenly the page came to life (weird!!!). Because I didn't want to leave the console.log in the code I added this:

if(content) {
                content = $.extend(true,{},content);
                content = content.content;
            }

this hack magically works so I hope others will benefit from it. Better solutions are welcome :-)

[Ajianz]

We are facing the same issue. Our application is not loading in IE11, getting the below error in console, angular-deckgrid: No CSS configuration found (see https://github.com/akoenig/angular-deckgrid#the-grid-configuration).

Could you please let us know any solution available for this or please let us know where this hack can be applied.

Thanks in advance!

[praabjerg]

Same here. This seems to be a somewhat bizarre issue with the latest IE11 update. The relevant bit of code in deckgrid is this:

        Deckgrid.prototype.$$getLayout = function $$getLayout () {
            var content = $window.getComputedStyle(this.$$elem, ':before').content,
                layout;

            if (content) {
                content = content.replace(/'/g, '');  // before e.g. '3 .column.size-1of3'
                content = content.replace(/"/g, '');  // before e.g. "3 .column.size-1of3"
                content = content.split(' ');

                if (2 === content.length) {
                    layout = {};
                    layout.columns = (content[0] | 0);
                    layout.classList = content[1].replace(/\./g, ' ').trim();
                }
            }

            return layout;
        };

If you exchange the first three lines of the function with this:

        Deckgrid.prototype.$$getLayout = function $$getLayout () {
            var styles = $window.getComputedStyle(this.$$elem, ':before'),
                layout, content;
            // console.log(styles);
            content = styles.content;

and then use the debugger to inspect respectively the styles and content variables, you'll note that the styles.content attribute exists, but seems to disappear into a 'none' string when you try to assign it. However, if you try to print the styles variable with console.log before you assign it to the content variable, it works!

I am deeply puzzled.

(Edit: Added an outcommented console.log(styles) to illustrate)

[praabjerg]

GaryWenneker's workaround seems to work, though you have to extract the CSSStyleDeclaration first, like I do above. In the context of my example:

        Deckgrid.prototype.$$getLayout = function $$getLayout () {
            var styles = $window.getComputedStyle(this.$$elem, ':before'),
                layout, content;
            styles = $.extend(true,{},styles);
            content = styles.content;

As far as I can see though, this workaround is dependent on having a full jQuery available. I don't think the jQuery Lite that comes with Angular includes .extend, and angular.extend doesn't seem to work in the same way.

[yamafaktory]

@praabjerg workaround successfully corrects the issue. Thanks!

[Ajianz]

yo! It worked...Thanks!

[tcdevs]

Here is some additional info: The bug only seems to occur with IE11 version:11.0.9600.17843 - update version: 11.0.20. When you use IE11 version: 11.9600.17914 -update version: 11.0.21 it works.

@praabjerg Thanks for the fix.