css - 表格中的粗动态边框会导致 Chrome 出现视觉故障吗？

Question

我有一个简单的动态边框，似乎在 IE 和 Firefox 中运行良好，但在 Chrome 中，它有时似乎得到一个奇怪的双倍粗边框。我看不出 CSS 有任何区别，而且我似乎无法深入研究到底是什么导致特定边框变厚，但我已经设法创建了一个 CodePen 来演示该问题。知道这是 Chrome 的问题还是我的 CSS 有问题？

在笔中，如果您按照说明进行操作，那么您应该会得到一个顶部带有双粗边框的单元格，如下所示:

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>

编辑:从 pen 中删除了 ng-table 部分以简化 JavaScript。

Answer 1

我不得不在客户端宽度周围玩一下，看看你在描述什么，但是，是的，它确实发生了。由于 CSS，Chrome 不得不动态地重新调整行大小，并且可能没有注意到它需要在由于增加的厚度而需要的所有大小调整之后需要完全重新绘制单元格。我依稀记得曾经在 Chrome 中注意到一个类似的奇怪问题，在表格上方的一些 CSS 更改将单元格向下推后，Chrome 没有意识到它需要在新位置重新绘制我的一些表格单元格的背景。

请注意，如果您在 DevTools 中打开并关闭一些不是很直接相关的 CSS 语句(例如 TH vertical-align)，触发的重绘会纠正视觉故障，所以我认为它有资格作为 Chrome 错误 - 无论在这样的切换之后渲染 chrome 最终应该是它开始时所做的。

一般来说，通过更改边框来调整行大小可能并不理想，但我可以看到，考虑到表格的样式选项，您可能有很多不错的选择。 (真正理想的是，如果有轮廓顶部、轮廓底部等，以及表格的轮廓折叠，那么 this 可以扩展以添加不影响位置的轮廓，使任意单元格边框消失。)

您可能会采取一些措施来缓解故障:

1. 将行高设置为一些额外的值，例如 td,th{height:35px} 似乎可以解决我在 Chrome 中对您的示例进行的测试。我不确定为什么，因为单元格的垂直定位在点击时仍然会发生变化。我想 Chrome 以某种方式获得了一些提示来进行更多重绘。
2. 将表格设置为 border-collapse:separate。不理想，我知道。
3. 将每个单元格的内容包裹在一个内部 div 中，您可以为其设置边框样式。这也受到 border-collapse:separate 的一些缺点的影响，即蓝色轮廓被常规线条打断，以及连续选择的线条上的双轮廓。