Invalid size calculation with calc()

Confirmed Issue #15637241


Ceyoniq T.
Jan 26, 2018
This issue is public.
Found in
  • Microsoft Edge
Found in build #
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

There’s a container (width: 100%) with three children: two container (each width: calc(50% - 6px)) and a divider (width: 12px). If you resize the window the size calculation doesen’t work properly. With every second pixel getting bigger/smaller the secon container slips out of the row.


1 attachment

Comments and activity

  • And is there a reason why Edge displays width: calc(-6px + 50%) instead of width: calc(50% - 6px) as written in the css file? See attachments…

  • Microsoft Edge Team

    Changed Assigned To to “Bogdan B.”

    Changed Status to “Confirmed”

  • Thanks for the report. Unfortunately a known issue. Marking this as a dupe of the internal issue tracking this.

     is there a reason why Edge displays width: calc(-6px + 50%)

    yes, this is because a calc(…) is simplified to a format close to what is being defined in TypedOM which does not preserve the order of sum and pixels values when this is not required for correctness

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

Sign in