Why is IE11 unable to calculate this? The console shows it as invalid (highlighted in red)
h6 {
...
font-size: calc(calc((( (20 / 16) / 16 - 1 / 16) * (100vw - 20rem) / (992 / 16 - 20) + 1 / 16 * 1rem) * 16));
...
}
However, the following code works:
body {
...
font-size: calc((( (20 / 16) / 16 - 1 / 16) * (100vw - 20rem) / (992 / 16 - 20) + 1 / 16 * 1rem) * 16);
...
}
The calculations are generated from scss files, which involve multiple nested variables (each containing a calculation). If nesting calc() functions is causing the issue, how can I get Sass to eliminate them?
Here's an example of the nested variables:
--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 transformed by Webpack using postcss-custom-properties into readable CSS for IE (similar to the initial code provided)
Any suggestions or solutions?