Support nested calc ident

Fixed, not yet flighted Issue #12143022

Details

Created
May 26, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
15.15063
Reports
Reported by 10 people

Sign in to watch or report this issue.

Steps to reproduce

:root {
  --foo: 1rem;
  --bar: calc(var(--foo) * 2);
  --baz: calc(var(--bar) * 2);
}

With this CSS var(--baz) should be 4rem, but Edge cannot understand this. I tested this on Chrome 58, Firefox 53.0.3, and Mobile Safari 10.3.2, and they works as expected.

This bug is very critical, because many of us calcurate width with calcurated width in Sass.

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “James M.”

      Changed Assigned To to “Bogdan B.”

      Changed Assigned To from “Bogdan B.” to “Kevin B.”

      Changed Status to “Confirmed”

      Changed Title from “Custom property does not inherit `calc()` values” to “Custom property does not inherit `calc()` values”

      Changed Assigned To from “Kevin B.” to “Saqib A.”

      Changed Status from “Confirmed” to “In progress”

      Changed Title from “Custom property does not inherit `calc()` values” to “Support nested calc ident”

      Changed Assigned To from “Saqib A.” to “Kevin B.”

      Changed Status from “In progress” to “Confirmed”

    • Updating title to be more accurate & increasing numinstances since I resolved our already open bug to this one. Also, a slight workaround - we do support nested calcs just not that of the calc() ident. For example: calc(calc(2+2) + 2) won’t work but calc((2+2) + 2) will. Thanks again for reaching out to us.

    • The problem is that this workaround doesn’t really work when you need to compute the dimensions of an element based on those of another one, which you have no control over and may or may not be calc() values. If they’re not calc() values, no problem, but if they are, the whole thing breaks in Edge.

      Simplified example: https://codepen.io/thebabydino/pen/ZJLzeO/ - the child element’s height is .7 of that of its parent calc(.7 * var(--parent-size)). This works just fine as long as --parent-size is not a calc() value, but if it happens to be, then the child element’s height isn’t computed correctly.

      Actual thing this breaks: I recently created an animated logo https://codepen.io/thebabydino/pen/vJydqw for someone. It’s a spinning 3D shape whose dimensions depend on those of the scene it’s in. I’ve left the dimensions of the scene easy to reset for the person who’s going to use the logo. The idea was for them to be able to use any values they might need as the scene dimensions, calc() values or not. But using calc() values there breaks the thing in Edge.

    • Microsoft Edge Team

      Changed Assigned To from “Kevin B.” to “Saqib A.”

      Changed Status from “Confirmed” to “In progress”

      Changed Assigned To from “Saqib A.” to “Ethan J.”

      Changed Status from “In progress” to “In code review”

      Changed Status from “In code review” to “Fixed”

    • Resolving as fixed.

    • Microsoft Edge Team

      Changed Status from “Fixed” to “Fixed, not yet flighted”

    • The status should be “Fixed” now, right?

    • Yes, this fixed on Edge 16! Thanks!

    You need to sign in to your Microsoft account to add a comment.

    Sign in