SVG sprite is not fully hidden

[tedw]

Hi there,

I just ran into a weird edge case where the SVG was invisible but created a 300px x 150px rectangle that was overlapping my logo, preventing users from clicking on it.

Here’s a demo https://jsbin.com/rahucobubu/edit?html,css,output

I think adding overflow: hidden; to the div wrapper would be the simplest fix.

<div style="width: 0; height: 0; overflow: hidden;">

Here’s a related PR for reference https://github.com/patrickxchong/eleventy-plugin-svg-sprite/pull/3.

It may also make sense to add position: absolute; to account for other edge cases (see SO question). FWIW I noticed svg-sprite does this.

Thanks for your work on this plugin!

[patrickxchong]

Hey @tedw thanks for raising the issue. I've updated the CSS on the div to width: 0; height: 0; position: absolute; display: none;. You can refer to it here: https://github.com/patrickxchong/eleventy-plugin-svg-sprite/commit/28525e867a543717f6d44f5399fc18b3456040f4

Updating the plugin should fix the issue for you, keep me posted if it doesn't!

[tedw]

Thanks a lot!

[patrickxchong]

Closing this for now. :)

[tedw]

@patrickxchong Oh hey, just realized you added display: none; to the inline styles. It turns out this causes gradients in the SVGs to disappear (https://github.com/emilbjorklund/svg-weirdness/issues/12). Can we remove that and use overflow: hidden; instead? Thanks!

[patrickxchong]

Oh whelps, my bad, I was careless and went to use display: none instead of overflow: hidden. Have just pushed an update that uses overflow: hidden. Sorry about that!

[tedw]

@patrickxchong No worries, thanks for the quick fix!