Blending for CSS gradients behaves unexpectedly

Question

I'm creating a CSS linear gradient with color-hints and I want to create an effect to blend from one color to the background color on one side, and then do the opposite to blend back on the other side.

Unfortunately, the blending for the colors is not consistent so one side looks different than the other (on Edge Chromium).

You can see the effect with the below snippet:

For the first div, blend from left to right starting from blue and ending in orange. The midpoint for the blend should be 75% of the way across.

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

For the second div, blend from left to right starting from orange, and ending in blue. The midpoint for the blend should be 25% of the way across (from the right).

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

I would expect these gradients to be identical since the midpoint is at the exact same point, but you can see that it's different. The midpoint is in the correct location and the color seems to match, but the blending between the midpoint and the blue side seems off. If orange is the "starting" color (the second gradient going from the right) then it seems to have more influence on the final color.

The last two divs show that if the mid-point is at 50% then the blending is the same.

Is there a way to fix this or do I just need to manually add my own stop using the midpoint color and avoid using color-hints?

Screenshot for reference:

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>

Edit: Here's another image that makes it even more clear

The first portion of the gradient (e.g. 0% up to X%) should smoothly change from the first color to the midpoint, but you can see that it's mostly the first color, and only starts to transition close to the color-hint point.

But the second portion (X% to 100%) properly uses the entire length to transition so it's a smooth gradient from the first color to the midpoint color.