angular ui-grid not painting background color in a cell only in internet explorer

I have below column def, and I am using this to change the color of the row. But for some reason on inteet explorer the Idea column does not gets colored. It stays white background, however it changes when i scroll to left and right. Any suggestions to fix it?

 [ {
        "name" : "dqId",
        "displayName" : "DQ Issue ID",
        "width" : "10%",
        "visible" : true,
        "cellTemplate": "<div class="ui-grid-cell-contents" ng-class="{'grid-selected-row': row.entity.isSelected}">  {{row.entity.dqId}} </div>"
    },{
        "name" : "SeqNO",
        "displayName" : "Seq NO",
        "width" : "5%",
        "visible" : false,
        "cellTemplate": "<div class="ui-grid-cell-contents" ng-class="{'grid-selected-row': row.entity.isSelected}">  {{row.entity.SeqNO}} </div>"
    },{
        "name" : "issueTypeNames",
        "displayName" : "DQ Issue Types",
        "width" : "30%",
        "visible" : true,
        "cellTemplate": "<div class="ui-grid-cell-contents" ng-class="{'grid-selected-row': row.entity.isSelected}">  {{row.entity.issueTypeNames}} </div>"
    },{
        "name" : "Idea",
        "displayName" : "Data Quality Comments",
        "width" : "28%",
        "visible" : true,
        "cellTemplate": "<div class="ui-grid-cell-contents" ng-class="{'grid-selected-row': row.entity.isSelected}" ng-bind="row.entity.Idea">  </div>"
    }, {
        "name" : "createdBy",
        "displayName" : "Created By",
        "width" : "8%",
        "visible" : true,
        "cellTemplate": "<div class="ui-grid-cell-contents" ng-class="{'grid-selected-row': row.entity.isSelected}">  {{row.entity.createdBy}} </div>"
    }, {
        "name" : "createdDate",
        "displayName" : "Created Date",
        "width" : "10%",
        "visible" : true,
        "cellTemplate": "<div class="ui-grid-cell-contents" ng-class="{'grid-selected-row': row.entity.isSelected}">  {{row.entity.createdDate}} </div>"
    }, {
        "name" : "reviewDate",
        "displayName" : "Review Date",
        "width" : "16%",
        "visible" : true,
        "cellTemplate": "<div class="ui-grid-cell-contents" ng-class="{'grid-selected-row': row.entity.isSelected}">  {{row.entity.reviewDate}} </div>"
    }, {
        "name" : "capImpRating",
        "displayName" : "Capital Impacting Severity Rating",
        "width" : "12%",
        "visible" : true,
        "cellTemplate": "<div class="ui-grid-cell-contents" ng-class="{'grid-selected-row': row.entity.isSelected}">  {{row.entity.capImpRating}} </div>"
    }, {
        "name" : "dqResolutionNotes",
        "displayName" : "Resolution Notes",
        "width" : "12%",
        "visible" : true,
        "cellTemplate": "<div class="ui-grid-cell-contents" ng-class="{'grid-selected-row': row.entity.isSelected}">  {{row.entity.dqResolutionNotes}} </div>"
    }, {
        "name" : "reviewType",
        "displayName" : "Review Type",
        "width" : "16%",
        "visible" : true,
        "cellTemplate": "<div class="ui-grid-cell-contents" ng-class="{'grid-selected-row': row.entity.isSelected}">  {{row.entity.reviewType}} </div>"
    }, {
        "name" : "dqResolutionDate",
        "displayName" : "Resolution Date",
        "width" : "16%",
        "visible" : true,
        "cellTemplate": "<div class="ui-grid-cell-contents" ng-class="{'grid-selected-row': row.entity.isSelected}">  {{row.entity.dqResolutionDate}} </div>"
    }, {
        "name" : "descripancyNotes",
        "displayName" : "Issue Discrepancy Notes",
        "width" : "16%",
        "visible" : true,
        "cellTemplate": "<div class="ui-grid-cell-contents" ng-class="{'grid-selected-row': row.entity.isSelected}">  {{row.entity.descripancyNotes}} </div>"
    }, {
        "name" : "reviewSubType",
        "displayName" : "Review Sub Type",
        "width" : "16%",
        "visible" : true,
        "cellTemplate": "<div class="ui-grid-cell-contents" ng-class="{'grid-selected-row': row.entity.isSelected}">  {{row.entity.reviewSubType}} </div>"
    }, {
        "name" : "isPotential",
        "displayName" : "Potential DQ Issue",
        "width" : "16%",
        "visible" : true,
        "cellTemplate": "<div class="ui-grid-cell-contents" ng-class="{'grid-selected-row': row.entity.isSelected}">  {{row.entity.isPotential}} </div>"
    }, {
        "name" : "dqIssueStatus",
        "displayName" : "Issue Status",
        "width" : "16%",
        "visible" : true,
        "cellTemplate": "<div class="ui-grid-cell-contents" ng-class="{'grid-selected-row': row.entity.isSelected}">  {{row.entity.dqIssueStatus}} </div>"
    }, {
        "name" : "followUpNotes",
        "displayName" : "Follow Up Notes",
        "width" : "16%",
        "visible" : true,
        "cellTemplate": "<div class="ui-grid-cell-contents" style="height:100%" ng-class="{'grid-selected-row': row.entity.isSelected}">  {{row.entity.followUpNotes}} </div>"
    }]


.grid-selected-row{
    background-color: #c9dde1!important;
}

rowTemplate is below
 "<div ng-click='grid.appScope.loadDataQualityIssueDetails(row.entity)' uib-tooltip='{{row.entity[col.colDef.name]}}' tooltip-placement='top' tooltip-animation='true' tooltip-append-to-body='true' " +
            "ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" " +
            "class="ui-grid-cell" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader}"

ui-grid-cell>"