Invalid size calculation with calc()

Confirmed Issue #15637241

Details

Author
Ceyoniq T.
Created
Jan 26, 2018
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
16.16299
Reports
Reported by 2 people

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

  • Is there any workaround for this bug?

  • I found a bug. if I replace 0s with 1s in the delay or animation duration the animation does not work. Microsoft Edge 44.17763.1.0

  • I found a bug. if I replace 0s with calc(0s + 1s) in the delay or animation duration the animation does not work. Microsoft Edge 44.17763.1.0

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

Sign in