CSS线性渐变起始位置不符合预期问题求助

各位好，我正在实现一组带线性渐变背景的方块组件，想要精准控制每个方块里渐变的起始过渡位置，目前我把过渡起始点设为50%，但实际渲染效果出现了异常，想请大家帮忙排查下原因。

我的实现代码 #

CSS 样式

.block{ 
  font-family: 'Roboto Mono', monospace; 
  display: flex; 
} 
.tile{
  aspect-ratio: 1 / 1; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  text-align: center; 
  width: 100px; 
  color: white; 
  font-size: 12px; 
  background: linear-gradient(to right, var(--from) 0%, var(--from) 50%, var(--to) 100%); 
} 
.tile:not(:last-child) { 
  border-right: solid 1px black; 
}

HTML 结构

<div class="block"> 
  <div class="tile" style="--from: #bc6df2; --to: #0099ff">01</div> 
  <div class="tile" style="--from: #0099ff; --to: #0082ec">02</div> 
  <div class="tile" style="--from: #0082ec; --to: #007ce7">03</div> 
  <div class="tile" style="--from: #007ce7; --to: #0082ec">04</div> 
  <div class="tile" style="--from: #0082ec; --to: #0082ec">05</div> 
  <div class="tile" style="--from: #0082ec; --to: #bc6df2">06</div> 
  <div class="tile" style="--from: #bc6df2; --to: #af51f0">07</div> 
  <div class="tile" style="--from: #af51f0; --to: #0094fb">08</div> 
  <div class="tile" style="--from: #0094fb; --to: #1aa3ff">09</div> 
  <div class="tile" style="--from: #1aa3ff; --to: #c989f4">10</div> 
  <div class="tile" style="--from: #c989f4; --to: #bc6df2">11</div> 
  <div class="tile" style="--from: #bc6df2; --to: #a335ee">12</div> 
  <div class="tile" style="--from: #a335ee; --to: #a335ee">13</div> 
</div>

问题描述 #

我原本预期每个tile会在50%宽度位置开始，从--from颜色平滑过渡到--to颜色，像tile 01和08的表现是完全符合预期的，但观察tile 06和10时，明显能看到渐变过渡像是在80%甚至90%的位置才启动，完全偏离了我设置的50%起始点。

有没有大佬能帮我看看这段代码哪里出了问题，为什么会出现这种不一致的渐变起始位置？

内容来源于stack exchange