calc() not working with transform in Internet Explorer/Microsoft Edge

Question

I am trying to scale a div by an amount equal to 1/2.9. I can type it as a decimal, but it won't be as accurate as the fraction.

This code works in both IE and Chrome:

.container {
  position:    absolute;
  width:       200px;
  height:      290px;
  transform:   scale(0.3448275862068966);
  background:  #F00;
}

<div class="container"></div>

However, with calc(), it only works in Chrome:

.container {
  position:    absolute;
  width:       200px;
  height:      290px;
  transform:   scale(calc(1/2.9));
  background:  #F00;
}

<div class="container"></div>

IE just ignores my calc(1/2.9). It does not scale the container.

Is there anything I can do to make IE correctly render calc()?

Answer 1

No. Since you're not even performing arithmetic with dynamic values here, just do yourself a favor and hardcode the ratio to three decimal places. Three decimal places is all the precision you need, even when taking high-resolution device displays into account.