Internet Explorer CSS width: calc()

Question

https://jsfiddle.net/dm7pxv1k/1/

I've got a problem with IE, when i've got 3 divs with background-image in 1 row and everyone has width: calc(100% / 3);.

If you resize a window, third image blinks.

When you resize the window to big resolution like .banner-mini has at least width:2000px;, then third image dissapears totally.

I've also implemented browser prefixes - you can see in Fiddle.

Has anybody please any idea, how I could fix that? Thank you so much!

Btw: Other browsers are allright.

Answer 1

A little and easy workaround for this is to reduce the width by 1px:

.banner-mini{
  height: 220px;
  width: 100%;
  overflow: hidden;
}
.banner-mini .box{
  float: left;
  width: 33%; /** older browsers **/ 
  width: -webkit-calc((100% / 3) - 1px); /** Safari 6, Chrome 19-25 **/
  width: -moz-calc((100% / 3) - 1px); /** FF 4-15  **/
  width:  calc((100% / 3) - 1px); /** FF 16+, IE 9+, Opera 15, Chrome 26+, Safari 7 and future other browsers **/
  height: 100%;
}
.banner-mini .fst{
  background: url(http://s33.postimg.org/q43iabwtr/banner_1.jpg)  no-repeat center center; 
  background-size: 100%;
}
.banner-mini .snd{
  background: url(http://s33.postimg.org/tozdtk1db/banner_2.jpg)  no-repeat center center; 
  background-size: 100%;
}
.banner-mini .trd{
  background: url(http://s33.postimg.org/lkr9otey7/banner_3.jpg)  no-repeat center center; 
  background-size: 100%;
}

<div class="banner-mini">
  <div class="box fst"></div>
  <div class="box snd"></div>
  <div class="box trd"></div>
</div>