Thick dynamic borders in a table lead to crashes in Chrome?

Question

I have a simple dynamic border that seems to work fine in IE and Firefox, but in Chrome it sometimes seems like an odd double border is produced. I don’t see any difference in CSS, and I can’t escape from what exactly makes this particular border double, but I managed to create a CodePen that demonstrates the problem. Any idea if this is a problem with Chrome or am there something wrong with my CSS?

In the pen, if you follow the directions, you should get a cell with double border thickness on top:

Codepen

    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>

Run codeHide result

Edit: Removed parts ng-tablefrom the pen to simplify JavaScript.

Answer 1

, , , , . Chrome " " - CSS , , , - . , Chrome, Chrome , , , CSS .

, CSS DevTools (, TH), , , Chrome - , , , , .

, , , , , , . (, , , .. , , -, , .)

, , :

• - , td, th {height: 35px}, , Chrome. , , - . , - , .
• : . , .
• div, . : , , , , .