IE11のcalc（）バグ内部

Question

私の変換：translateX（calc（））はIE、Safari、Chrome、Firefoxではうまく動作しますが、IE 11では問題ありません。問題がどこにあるのか教えてください。 私のインジケータは、1回目のアイテムから最後の1回のクリックイベントまで移動します。

<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

私はこの問題に関して同様の質問を見つけました。 See here

次のように動作しますようです：

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