Not all browsers support susy-svg-grid() with mixed units

[Jones-S]

Hi there

I really enjoy susy so far. I also specifically like the feature susy-svg-grid() to display the grid svg.
So far I always used it with a fluid configuration:

$susy: (
  'columns': susy-repeat(8), // makes 8 fluid columns
  'gutters': 0.13, // unitless gutter as fraction, on the same scale as any unitless columns
);

But now I want to use a fixed width:

$susy: (
  'columns': susy-repeat(8), // makes 8 fluid columns
  'gutters': 20px, 
);

The gutter is taken into account when displaying my layout, but unfortunately the grid svg in the background would just disappear.
I can see the base64 encoded svg but it would not show up:

If I change it back to the unitless gutter I can see it again...

If you compare the two screenshots, you can see a difference with the calc() part.
Is this maybe not working correctly? Did you ever experience something similar?
Or any idea where I could look for bugs?
It's really just the gutters I change and the grid disappears...

Cheers and thanks

---

Edit:
I just edited the svg code in the inspector, and I changed one of the values looking like
width="calc(((100% - 7.7778rem) / 8 * 1))"
to something like width="10%" which would immediately show me one of the grid bars.
So I assume this calc stuff must cause an error, although I don't know how to fix it.

[mirisuzanne]

The calc() output comes from the fact that you are mixing units in your config: the columns are defined fluid, and the gutters are defined in px. If you use px for both gutters and columns (e.g. susy-repeat(8, 100px) you will get non-calc output. So this bug seems specific to calc() output, not fixed sizes.

From my quick tests, the calc() output seems to work fine in Chrome (I'm using Canary), but not in Firefox (I'm using Dev Edition).

Since support of calc() in SVG is a browser issue, and calc() is the only proper way to mix fixed/fluid units – I think we should just add a warning to the documentation: This feature may not be supported in all browsers.

[Jones-S]

Oh I see. Yes I also have the Dev Firefox. Thanks for the very quick answer.
I think I will keep my mixed fluid/unit setting and for checking the grid I will just open chrome.
Thank you

[Jones-S]

Update: Firefox Developer Edition 69.0b3 (64-bit) can handle mixed units now.
(Firefox Standard does still not support it though).