CSS 在 google chrome v69 中组合 "transform" 和网格单元格边框时出现问题

Question

我在使用 Chrome 版本 69.0.3497.100（官方构建）（64 位）时遇到了一个奇怪的 css 行为，Edge 和旧版本的 Chrome 版本 68.0.3440.106（正式版）（64 位）。

在 html 中使用以下任一属性在 css 中定义网格时：

-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

网格中由行单元格上的 border-left 定义的垂直线的颜色被覆盖。

参见 jsfiddle link 示例。

满格css： https://jsfiddle.net/6ys9q780/

最小化问题以显示问题： https://jsfiddle.net/mrfuq5c9/

这是 chrome 的错误还是我做错了什么？

感谢您的帮助。

.uiGrid {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); 
}

.uiGrid.uiGridView.uiGridRow > td {
  border-left: 10px solid blue;
  padding-left: 4px; 
}

Answer 1

这确实已在 70.0 版中修复，因此可能是一个错误。感谢 vals 提供的信息。

CSS 在 google chrome v69 中组合 "transform" 和网格单元格边框时出现问题

CSS issue when combining "transform" and grid cell border in google chrome v69

html

css

google-chrome

css-transforms

css-grid