Invalid size calculation with calc()

Confirmed Issue #15637241

Details

Author
k s.
Created
Jan 26, 2018
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
16.16299
Reports
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.
See https://jsfiddle.net/f605ejmy/12/

Attachments

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