[Note: I've written this through the day as i've been experimenting things. There is sort of a conclusion at the end, making this an issue as a) a place to make a note and b) just incase i'm being stupid!]
I'm not sure where this is coming from (my code or the plugin) but posting here in the hope that someone can help me debug as i've got to the point where i'm punching my colleagues with anger! :smile:
When I generated the sprite with version prev1 and specified the background size and positioning in ems (working them out manually), the sprite worked correctly cross browser.
With v1 I can amazingly make a sprite map so there is no manual work involved. However, the generation in the sprite is a bit different to the previous version, and doesn't seem to want to play well in Safari - with the positioning and sizes generated using a template.
If i generate the sprite with the older version, it seems the spacing is slightly different, despite being set to 5 in both cases (e.g. in the older one, there was 5px gap, in the new one it appears there is 5px all the way round - which would account for https://github.com/shakyShane/gulp-svg-sprites/issues/37).
I have tried to replicate the original sprite construction using templates, but still no joy. Below are some screenshots of what I am experiencing
How it should look:
How it looks in Safari when set to horizontal:
How it looks in Safari when set to vertical:
Isolating it in Codepen shows that Safari squashes the sprite a little bit - it might have a background size bug when using em units? It lines up on the right hand side (compared to the png & px equivalent) but the left is indented somewhat.
Update:
It is very weird - using diagonal layout resolves the problem. It makes a bigger sheet, but having a vertical or horizontal layout seems to break front-end with miss aligned icons.
In conclusion, this isn't really an issue as such, but confusing nonetheless!
This is my gulpfile, template and mixins if anyone is curious:
[Note: I've written this through the day as i've been experimenting things. There is sort of a conclusion at the end, making this an issue as a) a place to make a note and b) just incase i'm being stupid!]
I'm not sure where this is coming from (my code or the plugin) but posting here in the hope that someone can help me debug as i've got to the point where i'm punching my colleagues with anger! :smile:
It is vaguely related to the issue I opened and closed this morning https://github.com/shakyShane/gulp-svg-sprites/issues/42
When I generated the sprite with version pre
v1and specified the background size and positioning inems(working them out manually), the sprite worked correctly cross browser.With
v1I can amazingly make a sprite map so there is no manual work involved. However, the generation in the sprite is a bit different to the previous version, and doesn't seem to want to play well in Safari - with the positioning and sizes generated using a template.If i generate the sprite with the older version, it seems the spacing is slightly different, despite being set to 5 in both cases (e.g. in the older one, there was 5px gap, in the new one it appears there is 5px all the way round - which would account for https://github.com/shakyShane/gulp-svg-sprites/issues/37).
I have tried to replicate the original sprite construction using templates, but still no joy. Below are some screenshots of what I am experiencing
How it should look:
How it looks in Safari when set to
horizontal:How it looks in Safari when set to
vertical:Isolating it in Codepen shows that Safari squashes the sprite a little bit - it might have a background size bug when using
emunits? It lines up on the right hand side (compared to the png & px equivalent) but the left is indented somewhat.Update:
It is very weird - using
diagonallayout resolves the problem. It makes a bigger sheet, but having averticalorhorizontallayout seems to break front-end with miss aligned icons.In conclusion, this isn't really an issue as such, but confusing nonetheless!
This is my gulpfile, template and mixins if anyone is curious:
https://gist.github.com/mikestreety/fac6dd7c8c933ea871e3