calc doesn't work in background:gradient

Not reproducible Issue #8056733

Details

Author
of o.
Created
Jul 1, 2016
Privacy
This issue is public.
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

Build sample
   https://jsfiddle.net/5kdayres/

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

  • 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.

Attachments

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 https://jsfiddle.net/5kdayres/ 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.

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

    Sign in