CODEWITHSUNDEEP
cssinternet-explorersassinternet-explorer-11css-calc
Fred K
Fred K

Reputation: 13910

Invalid calc() on IE11

Why IE11 can't calc this? I see from the console that it finds it invalid (in the compiled styles it's red underlined)

h6 {
  ...
  font-size: calc(calc((( (20 / 16) / 16 - 1 / 16) * (100vw - 20rem) / (992 / 16 - 20) + 1 / 16 * 1rem) * 16));
  ...
}

but instead this one is right:

body {
  ...
  font-size: calc((( (20 / 16) / 16 - 1 / 16) * (100vw - 20rem) / (992 / 16 - 20) + 1 / 16 * 1rem) * 16);
  ...
}

The calcs are compiled from scss, they're a result of multiple nested variable (each one containing a calc). If the problem is nesting calc()s how can I force Sass to remove the inside calc() functions?

It's like this:

  --f-min-font-size: 16;
  --f-max-font-size: 20;
  --f-text-gradient: (( (var(--f-max-font-size) / var(--f-min-font-size)) / 16 - var(--f-foot)) * var(--f-hill));
  --text-scale-ratio: 1.200;

  --body-font-size: calc(var(--f-text-gradient) * var(--f-min-font-size));

  --h6-font-size: calc(var(--body-font-size));
  --h5-font-size: calc(var(--h6-font-size) * var(--text-scale-ratio));
  --h4-font-size: calc(var(--h5-font-size) * var(--text-scale-ratio));
  --h3-font-size: calc(var(--h4-font-size) * var(--text-scale-ratio));
  --h2-font-size: calc(var(--h3-font-size) * var(--text-scale-ratio));
  --h1-font-size: calc(var(--h2-font-size) * var(--text-scale-ratio));

The CSS variables (custom properties) are compiled via Webpack postcss-custom-properties to normal CSS readable from IE (like the ones posted at beginning)

Some ideas?

Upvotes: 1

Views: 213

Answers (1)

eyeonu
eyeonu

Reputation: 211

I know it's an old question but, I think it has to do with the nested calc function.https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11

what you can do is either remove the calc inside the calc manually or use my postcss plugin https://www.npmjs.com/package/postcss-remove-nested-calc

Upvotes: 0

Related Questions