Thanks to visit codestin.com
Credit goes to github.com

Skip to content

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

@Jones-S

Description

@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:
image

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

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions