translate property doesn't support calc()

Fixed, not yet flighted Issue #7739895

Details

Author
César V.
Created
May 31, 2016
Privacy
This issue is public.
Found in
  • Microsoft Edge
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

Exemple where the div should be pushed to the right for around 33.33333%

div {
  transform: translateX(calc(100% / 3));
}

This doesn’t work, the calc() property isn’t working when inside a translate() properties.

Attachments

0 attachments

    Comments and activity

    • The div isn’t pushed at all

    • Microsoft Edge Team

      Changed Assigned To to “Ibrahim O.”

      Changed Assigned To to “Rick J.”

      Changed Assigned To to “Bogdan B.”

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

      Changed Status to “Confirmed”

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

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

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

    • Thank you for the feedback on Edge. We are showing this issue as being fixed in RS1 - should you see this to not be the case please feel free to reactivate this item of feedback (or drop in a new issue, whichever you prefer) at your earliest convenience so that we may investigate further.

      All the best,
      The MS Edge Team

    • calc() works inside translate functions when used for the translate values along the x and y axes, but not for those along the z axis. If we use calc() inside translateZ() or for the translate value along the z axis (the third argument) inside translate3d(), then the computed value for the transform in Edge ends up being none.

      Live test https://codepen.io/thebabydino/pen/bwJgKG?editors=0101

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

    Sign in