Chrome 在设置了边框半径的高大物体上使用了错误的边框颜色答案

【问题标题】：Chrome using wrong border color on left on tall objects with border-radius setChrome 在设置了边框半径的高大物体上使用了错误的边框颜色
【发布时间】：2012-02-28 21:29:45
【问题描述】：

我认为 chrome 的边框颜色渲染可能存在错误。这是设置：

创建一个元素（我在 div 和 td 上都看到过它，包括 position:static 和 position:absolute）。
使这个对象的高度是宽度的两倍以上
为每一侧分配不同颜色的边框。
为圆角指定边框半径。

最终结果是左边缘的中间部分采用border-right-color而不是border-left-color。具体来说，如果 w 是对象的宽度，则顶部 w 像素和底部 w 像素是正确的，但中间 (h - 2w) 像素的颜色不正确。

这是一个 sn-p 代码和一个演示问题的屏幕截图。

<!doctype html>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<html>
  <head>
    <style>
      div#borderBug
      {
        position:absolute;
        top:10px;
        left:10px;
        width:152px;
        height:541px;

        border-width: 2px;
        border-style: solid;
        border-radius: 20px;

        border-left-color: blue;
        border-top-color: yellow;
        border-right-color: red;
        border-bottom-color: green;

        background-color: #dedede;
      }
    </style>
  </head>
  <body>
    <div id="borderBug"></div>
  </body>
</html>

我的 Chrome 版本是 17.0.963.56 m，在 Windows XP 上运行。我在 Safari、Firefox 或 IE8 中看不到此问题。

任何人都可以确认这是否是一个已知问题，或者是否有人知道标准解决方法？

我能想到的最佳解决方法是使用图像作为边框，但我还没有能够对此进行测试并查看它是否存在相同的错误。

另一个（丑陋的）选项可能是将另一个正确颜色的 HTML 元素放在有问题的边框部分的顶部。

提前感谢任何可以提供更多信息的人。

【问题讨论】：

另一个奇怪的事情是，如果我向下滚动窗口，边框会变成蓝色，然后又变成红色。 jsfiddle.net/j4yT4当屏幕上看不到角落时，颜色是正确的......

标签： html google-chrome css border-color

【解决方案1】：

已确认的已知问题：

Issue 106028
合并到Issue 113726

【讨论】：