Chromeの垂直スラッシュラインのトランジション不透明度の不具合を回避する方法

Question

stroke-width: 1pxとshape-rendering: crispEdgesという非常に単純な垂直線を作成しました。その不透明度をアニメーション化しようとすると、Google Chrome v62.0.3202.89（64ビット）が正しく表示されず、他のブラウザ（IE11、Edge、現行バージョンのFirefox、Operaなど）では正しく機能しませんでした。

Chromeでこの不規則な動作を修正するにはどうすればよいですか。

Answer 1

この単純な例https://codepen.io/ch3rn0v/pen/ZaypbW?editors=0110を作成して、回避策の3つのオプションを示しましたが、いずれも完璧であるとは限りません。

個人的に私はラインを絶対的に垂直にしないものが視覚的な見地からは最高だと思っていますが、純粋に垂直ではないという知識は私を悩ますものです。

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