calc doesn't work in background:gradient

Not reproducible Issue #8056733


of o.
Jul 1, 2016
This issue is public.
Reported by 2 people

Sign in to watch or report this issue.

Steps to reproduce

Build sample

only one step: apply this style to an element: background: linear-gradient(to right, #f5c64d calc(50% - 172px), transparent 0)

  • notice that it doesn’t work even if there is no syntax error.
    reason: calc doesn’t work. if we replace calc by pixels or percent it works again.


0 attachments

    Comments and activity

    • i attached the screenshot of ie11 but i checked and it happens also in edge.

    • Microsoft Edge Team

      Changed Assigned To to “Ibrahim O.”

    • Thank you for your feedback. I would like to remind you that we’re not presently working on feature bugs in Internet Explorer outside of security-related issues. Having said that I see that calc() function is working properly for both IE and Edge. Could you please provide us your IE version with OS build (winver.exe) Also I see that you are testing this issue on your local environment, could you please attach your minimized repro from your actual sample? This will help our investigation.

      Best regards,
      The MS Edge Team

    • Microsoft Edge Team

      Changed Steps to Reproduce

      Changed Assigned To from “Ibrahim O.” to “James M.”

      Changed Status to “Not reproducible”

    • Hello,

      Thank you for providing this information about the issue. After thorough testing, we are unable to reproduce this problem in Edge; please review and ensure your browser is maximized so the background will appear. Please reopen this case if you have new information for us to consider.

      Best Wishes,
      The MS Edge Team

    • The problem with calc() inside a background-gradient is real. It’s strange in that it happens inconsistently. I’ve created a web page here that demonstrates the problem.

    • I am also able to replicate this issue - the calc values appear to be ignored. Take the following example:

      background-image: linear-gradient(to bottom left, transparent calc(50% - 0.25px), #999 50%, #999 calc(50% + 4px), transparent calc(50% + 4.25px));

      The intention of this is to create a very narrow stripe (subpixel values for minor blurring so it’s not a hard line), but instead, it is being blurred from edge to edge.

      Example source:

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

    Sign in