calc() bug inside transform in IE11

Question

my transform: translateX(calc()) works fine in Safari, Chrome and Firefox but not in IE 11. I can't really find any problem with my code. Could you please tell me where the problem is? My indicator moves from the 1st item to the last one via click event.

<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));
}

Answer 1

I've found a similar question regarding this issue. See here

It seems the following will work:

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