This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Please ask a new question if you need help.

Cascading style sheets "rule: calc" is causing issue in Firefox

  • 1 reply
  • 1 has this problem
  • 1 view
  • Last reply by cor-el

Bmuzammil
Bmuzammil
more options

NOTE: ASP MVC 5 application, using bundling and minification turned on.

Problem is that if the value is set to "0px" then firefox automatically changes it to zero. I had to set the value to 0.1px to make it work properly soon as I added 0.1px resolved the issue.

max-height: calc(100vh - 0px); is converted to max-height: calc(100vh - 0); in firefox once the application runs.

The image included in this post shows the issue in action.

NOTE: ASP MVC 5 application, using bundling and minification turned on. Problem is that if the value is set to "0px" then firefox automatically changes it to zero. I had to set the value to 0.1px to make it work properly soon as I added 0.1px resolved the issue. max-height: calc(100vh - 0px); is converted to max-height: calc(100vh - 0); in firefox once the application runs. The image included in this post shows the issue in action.
Attached screenshots

All Replies (1)

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

Does this also happen when you do not minify the file in case minifying is causing this issue?

You did check the resulting file to make sure that the spaces around to ' - ' after the minification ?