Html IE11中转换内部的calc（）错误

我的转变：translateXcalc在Safari、Chrome和Firefox中运行良好，但在IE11中不起作用。我真的找不到我的代码有什么问题。你能告诉我问题出在哪里吗？ 我的指示器通过单击事件从第一项移动到最后一项

<div class="divWrapper">
  <div class="item-indicator move"></div>
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
         .
         .
         .
 <div class="item">8</div>
</div>

.item-indicator {
  position: absolute;
  background-color: #000;
  border-color: #000;
  opacity: 0;
  transition: opacity .25s;
  -webkit-transition: opacity .25s;
  right: 100%;
}

.move {
  -webkit-transition: -webkit-transform .25s;
  transition: -webkit-transform .25s;
  transition: transform .25s;
  transition: transform .25s, -webkit-transform .25s;
}

.divWrapper [data-position]{
 opacity: 1;
 right: auto;
}

.divWrapper [data-position='1']{
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0px); 
  transform: translateX(0); 
}

.divWrapper [data-position='2']{
  -webkit-transform: translateX(calc(100% + 4px));
  -ms-transform: translateX(calc(100% + 4px));
  transform: translateX(calc(100% + 4px));
}

.divWrapper [data-position='3']{
  -webkit-transform: translateX(calc(200% + 9px));
  -ms-transform: translateX(calc(200% + 9px));
      transform: translateX(calc(200% + 9px));
}

---

关于这个问题，我发现了一个类似的问题

似乎以下方法可以奏效：

transform: translateX(100%) translateX(4px);

可能重复的