CSS minify breaks Calc subtract operation in CSS

  • agvs

    (@agvs)


    11 years, 3 months ago

    I was super excited to use Autoptimize’s “inline above the fold css” option, but it mysteriously broke the grid on my site. A bit of sleuthing shows that the CSS minify function removes a necessary whitespace after a minus sign.

    So this:
    width: calc(33.33333% - ((0.75em*2)/3));

    Becomes this:
    width: calc(33.33333% -((0.75em*2)/3));

    Which the browser thinks is negative instead of subtraction.

    Can you fix this?

    https://wordpress.org/plugins/autoptimize/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Frank Goossens

    (@futtta)

    11 years, 3 months ago

    Hi agvs;
    I can confirm the bug and I will look into it with the developer of the upstream minification component.

    Maybe a stupid question, but wouldn’t
    width: calc(33.33333% - 0.75em*2/3);

    work as well (math-wise multiplication & divisions take precedence over the substraction)?

    frank

    Plugin Author Frank Goossens

    (@futtta)

    11 years, 3 months ago

    FYI: You can follow up on upstream issue here.

    frank

    Thread Starter agvs

    (@agvs)

    11 years, 3 months ago

    Thanks, Frank. You may be right about the order of operations though I prefer to be explicit to avoid mistakes on my end. Are you saying that it preserves the whitespace if you leave out the parentheses?

    Plugin Author Frank Goossens

    (@futtta)

    11 years, 3 months ago

    Are you saying that it preserves the whitespace if you leave out the parentheses?

    yes, it does, you can test that here if you like.

    frank

    Thread Starter agvs

    (@agvs)

    11 years, 3 months ago

    Cool, taking out the parentheses worked for me for the time being.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘CSS minify breaks Calc subtract operation in CSS’ is closed to new replies.