Wrong rendering of linear gradient when using calc for gradient size

Confirmed Issue #11326126 • Assigned to Ian P.

Details

Author
christian c.
Created
Mar 20, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Reports
Reported by 2 people

Sign in to watch or report this issue.

Steps to reproduce

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Steven K.”

      Changed Assigned To from “Steven K.” to “Ian P.”

      Changed Status to “Confirmed”

    • I have also encountered a calc() problem in linear gradient. To see the ugly output, use Edge to go to http://copyasmarkup.com/bug/edgeproblems.html and scroll down a little.

      I really hope this gets fixed soon.

      The LESS in question is:

          // \cancel, \bcancel, and \xcancel again.
          // Define the detailed background-image for the span.
          // Use a linear-gradient to draw a diagonal line that is 0.08 ems wide,
          // that is, 0.04 ems on each side of the line on the diagonal of the span.
          .cancel {
              background:
                 linear-gradient(to top left,
                     rgba(0,0,0,0) 0%,
                     rgba(0,0,0,0) ~"calc(50% - 0.04em)",
                     rgba(0,0,0,1) ~"calc(50% - 0.04em)",
                     rgba(0,0,0,1) ~"calc(50% + 0.04em)",
                     rgba(0,0,0,0) ~"calc(50% + 0.04em)",
                     rgba(0,0,0,0) 100%);
          }
      
      

      … which compiles to the CSS:

      .cancel {
        background: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.04em), #000000 calc(50% - 0.04em), #000000 calc(50% + 0.04em), rgba(0, 0, 0, 0) calc(50% + 0.04em), rgba(0, 0, 0, 0) 100%);
      }
      

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

    Sign in