I have a simple dynamic border that seems to work fine in IE and Firefox but in Chrome it sometimes seems to get an odd double-thick border. I can't see any difference in CSS and I can't seem to hone in on what exactly is causing that particular border to go double-thick but I have managed to create a CodePen that demonstrates the issue. Any idea if this an issue with Chrome or am I doing something wrong with my CSS?
In the pen, if you follow the directions then you should get a cell with a double thick border on top like this:
angular.module("myApp", []);
(function() {
"use strict";
angular.module("myApp").controller("demoController", demoController);
demoController.$inject = ["$scope"];
function demoController($scope) {
$scope.model = {selected: []};
$scope.select = function(id) {
$scope.model.selected[id] = !$scope.model.selected[id];
};
}
})(); tr.border-selected > td:not(:first-child) {
border-top-color: #4182c2;
border-top-width: thick;
border-bottom-color: #4182c2;
border-bottom-width: thick;
}
tr.border-selected > td:nth-child(2) {
border-left-color: #4182c2;
border-left-width: thick;
}
tr.border-selected > td:last-child {
border-right-color: #4182c2;
border-right-width: thick;
}
th {
text-align: center;
}<div ng-app="myApp">
<div ng-controller="demoController">
<h2 class="page-header">Chrome border glitch</h2>
<div class="bs-callout bs-callout-info">
<h4>Overview</h4>
<p>Adjust the bottom frame until it has a vertical scrollbar and then click on 1009 and you'll see how chrome seems to bungle the borders in the "Opened by" column. If another row is then selected (by clicking on it) then it seems to work correctly.</p>
</div>
<div>
<table class="table table-condensed table-bordered table-striped">
<thead>
<tr>
<th>#</th>
<th>Theme</th>
<th>Opened by</th>
<th>Updated</th>
</tr>
</thead>
<tr ng-class="{'border-selected': model.selected[1010] === true}">
<td ng-click="select(1010)">
1010
</td>
<td ng-click="select(1010)">
404 of "paper.html" and "header.html" when rendering ng-table
</td>
<td ng-click="select(1010)">
329530588
</td>
<td ng-click="select(1010)">
Jul 13, 2017 2:47:23 AM
</td>
</tr>
<tr ng-class="{'border-selected': model.selected[1009] === true}">
<td ng-click="select(1009)">
1009
</td>
<td ng-click="select(1009)">
ReferenceError: NgTableParams is not defined
</td>
<td ng-click="select(1009)">
weiwanying
</td>
<td ng-click="select(1009)">
Jul 12, 2017 9:48:30 PM
</td>
</tr>
<tr ng-class="{'border-selected': model.selected[1008] === true}">
<td ng-click="select(1008)">
1008
</td>
<td ng-click="select(1008)">
ng-table fixed header and scroll not working
</td>
<td ng-click="select(1008)">
Ramlanka7
</td>
<td ng-click="select(1008)">
Jul 11, 2017 11:05:27 AM
</td>
</tr>
<tr ng-class="{'border-selected': model.selected[1007] === true}">
<td ng-click="select(1007)">
1007
</td>
<td ng-click="select(1007)">
Accessibillity and wcag violation: filter input field form element don't have any label
</td>
<td ng-click="select(1007)">
QuBaR
</td>
<td ng-click="select(1007)">
Jul 7, 2017 2:47:13 AM
</td>
</tr>
<tr ng-class="{'border-selected': model.selected[1006] === true}">
<td ng-click="select(1006)">
1006
</td>
<td ng-click="select(1006)">
does not reload filter data in NgTableParams
</td>
<td ng-click="select(1006)">
gaurav2086
</td>
<td ng-click="select(1006)">
Jul 11, 2017 8:09:03 AM
</td>
</tr>
</table>
</div>
</div>
</div>Edit: Removed ng-table parts from pen to simplify the JavaScript.