CSS 渐变的混合表现出乎意料

Question

我正在用

color-hint

s 创建一个 CSS 线性渐变，我想创建一种效果，从一种颜色混合到一侧的背景颜色，然后执行相反的操作以在另一侧混合回来。

不幸的是，颜色的混合不一致，因此一侧看起来与另一侧不同（在 Edge Chromium 上）。

您可以通过以下代码片段看到效果：

对于第一个 div，从左到右混合，从蓝色开始到橙色结束。混合的中点应为整个路径的 75%。

        background-image: linear-gradient(to right, blue, 75%, orange);

对于第二个 div，从左到右混合，从橙色开始，到蓝色结束。混合的中点应为横跨（从右侧）的 25%。

        background-image: linear-gradient(to left, orange, 25%, blue);

我希望这些梯度是相同的，因为中点位于完全相同的点，但你可以看到它是不同的。中点位置正确，颜色似乎匹配，但中点和蓝色边之间的混合似乎不对。如果橙色是“起始”颜色（从右边开始的第二个渐变），那么它似乎对最终颜色的影响更大。

最后两个 div 显示，如果中间点为 50%，则混合是相同的。

有没有办法解决这个问题，还是我只需要使用中点颜色手动添加我自己的停止并避免使用

color-hint

s？

截图供参考：

div {
    width: 400px;
    height: 20px;
}

div:nth-of-type(1) {
    background-image: linear-gradient(to right, blue, 75%, orange);
}

div:nth-of-type(2) {
    background-image: linear-gradient(to left, orange, 25%, blue);
}

div:nth-of-type(3) {
    margin-top: 20px;
    background-image: linear-gradient(to right, blue, 50%, orange);
}

div:nth-of-type(4) {
    background-image: linear-gradient(to left, orange, 50%, blue);
}

<main>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
<main>