CSS transform translateX(-100%)偏移量超出预期的滑块问题

我正在开发一个包含多个项的滑块组件，点击箭头会改变slider-index变量值，进而控制滑块项的移动，但出现了显示异常：

• 当slider-index为0时显示正常：
  
• 点击几次箭头后，滑块显示开始异常：
  
• 滑动到末尾时，滑块项完全错位：
  

组件结构：容器包含滑块区域和两个箭头按钮，滑块内部是多个滑块项，每个滑块项包含图片及其他元素。

我的CSS代码如下：

.container {
  display: flex;
  justify-content: center;
  min-height: 25%;
}
.slider {
  margin: 0 1% 0 1%;
  --items-per-screen: 4;
  --slider-index: 0;
  display: flex;
  overflow:hidden;
}
.slider-item{
  flex: 0 0 25%;
  transform: translateX(calc(var(--slider-index) * -100%));
  transition: transform 250ms ease-in-out;  
}
.handle{
  flex: 0 0 5%;
  z-index: 10;
  margin: 0;
}

浏览器环境：Safari 14.1.2

内容的提问来源于stack exchange，提问作者Iqbal Bakhsh