SlickGrid: stylesheet variable is undefined in Chrome

While dynamically creating style and style rule via text node, Google Chrome does not add stylesheet to document.styleSheets immediately. As dynamic stylesheet doesn’t exist getColumnCssRules() throws “Cannot find stylesheet.” exception. To fix this I have added css rule vai JS. This works on (chrome,firefox and IE)

Modify createCssRules() and add new function addCSSRule. addCSSRule force browser to create stylesheet under document.styleSheets.

    function createCssRules() {
      $style = $("<style type='text/css' rel='stylesheet' />").appendTo($("head"));
      var rowHeight = (options.rowHeight - cellHeightDiff);
      if ($style[0].styleSheet) { // IE
        $style[0].styleSheet.cssText = "";
      } else {
        $style[0].appendChild(document.createTextNode(""));
      }
        var sheet =  $style[0].sheet;
        var index = 0;
        addCSSRule(sheet,"." + uid + " .slick-header-column", "left: 1000px;",index++);
        addCSSRule(sheet,"." + uid + " .slick-top-panel", "height:" + options.topPanelHeight + "px;",index++);
        addCSSRule(sheet,"." + uid + " .slick-headerrow-columns", "height:" + options.headerRowHeight + "px;",index++);
        addCSSRule(sheet,"." + uid + " .slick-cell", "height:" + rowHeight + "px;",index++);
        addCSSRule(sheet,"." + uid + " .slick-row", "height:" + options.rowHeight + "px;",index++);

        for (var i = 0; i < columns.length; i++) {
            addCSSRule(sheet,"." + uid + " .l" + i , "",index++);
            addCSSRule(sheet,"." + uid + " .r" + i, "",index++);
          }
    }

    function addCSSRule(sheet, selector, rules, index) {
        if(sheet.insertRule) {
            sheet.insertRule(selector + "{" + rules + "}", index);
        }
        else {
            sheet.addRule(selector, rules, index);
        }
    }