SVG sprite. Неправильное позиционирование в хроме

Создаю спрайт с помощью gulp (плагин gulp-svg-sprites). В Mozilla отображается нормально, в хроме открываю - всё сдвинуто. Если из конечного svg я генерирую png-спрайт (плагин gulp-svg2png), и подключаю его вместо svg, то во всех браузерах отображается нормально. т.е. я так понимаю это что-то связано именно из интерпретацией браузером.
Как исправить?
Пример моего спрайта после галпа есть здесь . При изменении размеров бегунком в хроме этот баг тоже можно увидеть (хорошо заметно при максимальном увеличении, на белых - когда инвертировать фон).
В мозиле всё нормально.
P.S. Обновил спрайт - установил, чтобы viewBox у всех элементов начинался с "0 0. не помогло.
Настройки gulp:
gulp.task('svg-sprites:build', function () { return gulp.src(options.theme.img_svg_src + '*.svg') .pipe(svgSprite()) .pipe(gulp.dest(options.theme.img_src + 'dict')) .pipe(filter(options.theme.img_src + 'dict/svg/*.svg')) .pipe(gulp.dest(options.theme.img_src + 'dict')); });

Ответ

Короткий ответ
Удалите атрибут viewBox="0 0 41 2023" из SVG. Впрочем, остальные viewBox тоже можете удалить. Можно сделать это автоматически с помощью svgo (плагин removeViewBox).
Длинный ответ
Это похоже на баг Chrome, связанный с расчетом background-size, когда background-size по горизонтали не кратен ширине viewBox в SVG.
Смотрите, у вас background-size задается в em: 4.1em 202.3em (sprite.css:5). А изменение размеров картинок задается через font-size от 2 до 14 px. Исходное значение font-size равно 10px, поэтому при открытии страницы размер фона в пикселях получается 41x2023 px, как раз как viewBox в SVG. Можно прописать background-size: 41px 2023px и все останется по-прежнему.
Но если указать на пиксель меньше: background-size: 40px 2023px, мы увидим смещение по вертикали. Хотя, казалось бы, картинка должна стать просто немного уже.
Поэтому при изменении шрифта все едет. Если задать размер шрифта 11px, то ширина фона получится 4.1em * 11px = 45.1px, а это не кратно 41 (ширина исходного viewBox). Следующее значение шрифта, при котором все показывается нормально - 20px: размер background-size по горизонтали становится 82px, что кратно 41.
Я точно не берусь описать все особенности этого бага (иногда он проявляется, иногда нет), но суть в том, что решение простое: удалите атрибут viewBox="0 0 41 2023" из SVG. Впрочем, остальные viewBox тоже можете удалить.
Можно сделать это автоматически с помощью svgo (плагин removeViewBox). Пример для gulp
gulp.task('remove-viewbox', function() { var svgmin = require('gulp-svgmin');
return gulp.src('src/*.svg') .pipe(svgmin({ plugins: [ {removeViewBox: true} ] })) .pipe(gulp.dest('dest/')); });