Calc tokenization fails when a space (U+0020) is present after a right paran (U+0029)

In code review Issue #11730857 • Assigned to Ethan J.

Details

Author
Dan W.
Created
Apr 20, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
15
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

The following CSS does not have the expected result:

div {
  --offset: 200;
  transform: translateX( calc( var(--offset) * 1px ) );
}

I would expect that to translate the div 200px, but it does not move. The following CodePen example shows the issue in full.
https://codepen.io/danwilson/pen/zwqvOK

It shows three divs: two control elements (one using a custom property value with a unit… and the other using calc with a unitless number but no custom property) and one element showing this reported behavior. With a transition applied, it appears to stutter slightly between two different custom property values, but does not actually move the amount expected.

Note: This is not happening with all cases of a unitless custom property value inside of calc. This second examples DOES work in Edge, where the calc + custom property is used in conjunction with width
https://codepen.io/danwilson/pen/aWNvqV .

Transform is the only place I’ve seen it so far, but it might not be limited to that.

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Steven K.”

      Changed Assigned To to “Rick J.”

      Changed Assigned To to “Bogdan B.”

      Changed Assigned To from “Bogdan B.” to “Greg W.”

      Changed Status to “Confirmed”

      Changed Title from “No translate when combining a unitless Custom Property and calc” to “Calc tokenization fails when a space (U+0020) is present after a right paran (U+0029)”

      Changed Assigned To from “Greg W.” to “Kevin B.”

    • This actually has nothing to do with custom props but actually with the tokenization work done for calc(). So I’ve clarified the title a bit. You can work around this now by removing the space - here’s an example: https://jsbin.com/bayudesuna/1/edit

    • The box with the issue in the CodePen did not have the same spacing as above, and it was still not translating.

      I added a fourth box that is the same as the third except it does not have a transition. And it translates as expected.

      Looks like my reduced test case needed to be reduced further, because it maybe has more to do with the transition. The third box has the translate + unitless variable + calc + transition and stutters (this is the one I originally highlighted as the problem, but does not have any extraneous spaces). The new fourth box is the same except it has no transition. It appears to properly jump states properly. The fifth box show what you mentioned Greg with the space.

      I think this is now two issues:

      1. The space inside calc() = no translate
      2. translate + calc + unitless variable + transition = stutters
    • Microsoft Edge Team

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

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

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

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

    Sign in