如何避免Chrome

Question

我使用stroke-width: 1px和shape-rendering: crispEdges创建了一条非常简单的垂直线。当我尝试设置其不透明度的动画时，结果是谷歌Chrome v62.0.3202.89（64位）无法正确呈现，而其他浏览器（如IE11，Edge，当前版本的Firefox和Opera）正确执行。

在Chrome中修复之前，我们如何避免这种不稳定的行为？

Answer 1

我创建了这个简单的示例https://codepen.io/ch3rn0v/pen/ZaypbW?editors=0110，以演示解决方法的三个选项，即使它们都不完美。

就我个人而言，我认为使线条不是绝对垂直的那个在视觉外观方面是最好的，但是它不是纯粹垂直的知识困扰着我。

const notSoVerticalLineCoords = {
    x1: lineOffsetX + 2 * lineHorizontalOffset + 0.01,
    x2: lineOffsetX + 2 * lineHorizontalOffset,
    y1: lineTopOffsetY,
    y2: lineLength + lineTopOffsetY
};