CSS calc() function not working due to removal of spaces around operators

Omnis LuxOmnis Lux Registered Users Posts: 8 Big grins
edited October 25, 2016 in Bug Reporting
Hi. I am not sure this would be considered a bug or 'by design', but here goes:

I'm in the process of designing my site, and I'm trying to use font scaling on gallery and folder headers. To accomplish this I use the vh and vw units, and I want to use these in conjuction with the calc()-function e.g:

font-size: calc(2vw + 12px);

This works fine in the editor, and the fonts scales as expected (relative to the viewport-size). But as soon as I publish, it stops working. When using the inspector in Chrome, the code shows:

font-size: calc(2vw+12px);

I.e the spaces around the '+' -operator has been removed by SmugMug, and therefore the syntax does not comply with the CSS3 specification (The spaces are neccesary to differentiate between operators and signed numbers). Chrome reports a 'Invalid property value' and ignores the code.

Any clue on how I can circumvent this, and still use calc() with + and - operators...?

Comments

  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited October 24, 2016
    I believe if you use a double negative, it should work:

    font-size: calc(2vw - -12px)
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • Omnis LuxOmnis Lux Registered Users Posts: 8 Big grins
    edited October 24, 2016
    leftquark wrote: »
    I believe if you use a double negative, it should work:

    font-size: calc(2vw - -12px)
    Thank you, leftquark! That was exactly what I was looking for [emoji106] . Hikin'Mike found out that white-space was not removed in the theme site-wide CSS, and I was just in the process of moving some of the code over. Glad i dont have to now [emoji1]
  • Omnis LuxOmnis Lux Registered Users Posts: 8 Big grins
    edited October 24, 2016
    Whoops! Sorry leftquark, I was a little quick there! it didn't work afterall, same result :(

    Any chances of SmugMug stops removing white-spaces in CSS content-blocks, or at least inside of calc() parentheses...?
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited October 25, 2016
    Omnis Lux wrote: »
    Any chances of SmugMug stops removing white-spaces in CSS content-blocks, or at least inside of calc() parentheses...?

    I'll double check with Engineering on the double-negative, since it was their suggestion. While I'd love to have a quick solution for you, it looks like using the theme site-wide CSS may be your best bet going forward.
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • Omnis LuxOmnis Lux Registered Users Posts: 8 Big grins
    edited October 25, 2016
    leftquark wrote: »
    I'll double check with Engineering on the double-negative, since it was their suggestion. While I'd love to have a quick solution for you, it looks like using the theme site-wide CSS may be your best bet going forward.
    Thank you, leftquark. I hope there can be a solution to this other than moving the code site-wide, as that reallly wont be very elegant...
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited October 25, 2016
    Omnis Lux wrote: »
    Whoops! Sorry leftquark, I was a little quick there! it didn't work afterall, same result :(

    I had one of our QA folks give this a whirl and it looks like the double negative should work. Here's an example using the double negative.

    Using this code in a "CSS Content Block":
    p {font-size: calc(2vw - -12px);}
    

    css_double_negative-XL.png
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • Omnis LuxOmnis Lux Registered Users Posts: 8 Big grins
    edited October 25, 2016
    leftquark wrote: »
    I had one of our QA folks give this a whirl and it looks like the double negative should work. Here's an example using the double negative.

    Using this code in a "CSS Content Block":
    p {font-size: calc(2vw - -12px);}
    

    css_double_negative-XL.png

    I got i t to work - I had mistyped it ( {font-size: calc(2vw - - 12px);} ) 11doh.gif
    Now it comes out correct, with spaces around the operator. Thank you so much for your time, leftquark! :D
Sign In or Register to comment.