Странные полосы прокрутки вокруг фона SVG в Chrome

Question

У меня проблема с добавлением SVG-файла в качестве фона.Кажется, все в порядке, но в Google Chrome я получаю неактивные полосы прокрутки справа и внизу svg, а не контейнер.Вот скриншот результата проблемы: http://xmages.net/show.php/2812560_strangescrollbars-jpg.html

А вот и часть css

#container>footer {
    width: 1000px;
    margin: -124px auto 0;
    padding-top: 221px;
    background: transparent url("../img/footerBackground.png") no-repeat 42px 0;
}
.backgroundsize.svg  #container>footer {
    background: transparent url("../img/vector/footerBackground.svg") no-repeat 42px 0;
    background-size:  553px 166px;
}

Я понятия не имею, откуда они берутся.Любая помощь?

Answer 1

Загляните в оригинальный svg-файл любым текстовым редактором.Если у вас есть какие-либо опорные точки, помещенные на полпикселя, переместите их к ближайшему пикселю.При экспорте SVG убедитесь, что размер документа равен круглому пикселю (например, 100 пикселей), а не половине пикселя (например, 100,49 пикселей).

Проблема в том, что если у вас есть документ с полутонной точкой привязки у края файла, веб-пакет округлит его до ближайшего пикселя и, таким образом, подумает, что у вас есть точки привязки вне документа,создаст фиксированную полосу прокрутки.

Answer 2

В хроме изображение кажется слишком большим для контейнера.

Просто добавьте

переполнение: скрытый;

к контейнеру в CSS, это должно остановить полосы прокрутки, или сделать контейнер немного больше.

Answer 3

Я также заметил, что при проверке SVG может быть установлено значение переполнения. Однако если вы удалите это значение, добавьте enable-background и убедитесь, что SVG округлен в большую или меньшую сторону и не использует десятичную точку, это устранит проблему с полосой прокрутки в Chrome.

Попробуйте заменить:

overflow="scroll" xml:space="preserve">

с

enable-background="new 0 0 1200 581" xml:space="preserve">