4

I started use Cassette library in our project. This library use Microsoft Ajax Minifier by default. I face problems breaking html layout on some pages only in firefox browser. I found that problem is related to CSS3 function calc(). The + and - operators must always be surrounded by whitespace in this function. I can redefine this properties somewhere out of this minify area but I don`t want to do that. I want to fix it inside file. Is it possible?

DrunkCoder
  • 8,215
  • 3
  • 19
  • 14
  • Please show the exact code example you're trying to fix and show what causes the problem after minimization. – jfriend00 Feb 01 '13 at 20:17
  • 1
    before: `width: calc(24.3% - 30px);`, after: `width:calc(24.3%-30px);` Is it clear? – DrunkCoder Feb 01 '13 at 20:23
  • Thanks for this question ... I just pulled my hair out because I didn't understand why I Firefox lost the calc() parts in the stylesheets while it worked fine in IE and Chrome. – Bernhard Koenig Jul 09 '13 at 21:49

1 Answers1

5

I found that using -moz- prefix for calc function leaves it untouched after minifier. Example:

.some_class {
  width: calc(24.3% - 30px);
  width: -webkit-calc(24.3% - 30px);
  width: -moz-calc(24.3% - 30px);
}

Becomes:

.some_class{width:calc(24.3%- 30px);width:-webkit-calc(24.3% - 30px);width:-moz-calc(24.3% - 30px)}
DrunkCoder
  • 8,215
  • 3
  • 19
  • 14