CSS Var calc issues in MS Edge

[frank-laemmer]

So it seems like that MS Edge at least until version 17.17134 has some issues with CSS Vars and Calc. Teutonic CSS uses modular scale. "Spacing" values with encapsulated calculations are getting rendered by the browser, life, from CSS vars. In general that works fine. But MS Edge fails to calculate in some cases.

TLDR; Your options now:

• Don't care about MS Edge (4% market share)
• Use the build process of Teutonic and use the fix (see below)
• Help finding a better fix here

Where it's working

In certain scenarios it works:

• margin utility classes
• typographic scale actually uses the same technique
• Flexbox gaps

Where a fix is possible

For padding elements, a simple (but stupid) fix was possible: re-write a general padding for all directions to use individual paddings for each direction.

/* not working in MS Edge */
padding: var(--space-m) 

/* working in MS Edge */
padding-top:    var(--space-m);
padding-right:  var(--space-m);
padding-bottom: var(--space-m);
…

That's what the _padding-fix.scss is for.

Where it's not working

In some cases it's not working:

• radius doesn't work from m on.
• box shadow blur doesn't work
• box shadow site from size m on doesn't work
• Grid CSS from gap size m, doesn't work

What I have tried

• Tested for a tokenize issue
• Maybe it's the unitless calculations issue?

The fix that works, but is not acceptable

There is a flag in the _vars-space-scale.scss. It defines how the calculation of modular scale is done. The main options are: A) in the browser (default), B) by SCSS. When dong the calc with SCSS, the values are no longer getting calculated, instead, hard coded. That works with MS Edge. The downside is, that the ratio and base CSS Vars no longer work. So it's not so easy to tweak the design any more, later on.