Strange scrollbars around the svg background in ch

Question

I have a problem adding an svg file as a background. Everything seems allright, but in Google Chrome I get strage inactive scrollbars on the right and bottom of svg, not a container. Here is screenshot of a problem result: http://xmages.net/show.php/2812560_strangescrollbars-jpg.html

And here comes the part of 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;
}

I have no idea where does them come from. Any help?

Answer 1

Look inside the original svg file with any text-editor. If you have any anchor points placed on half pixel, move them to the closest pixel. When you export the SVG, make sure the size of the document is round pixel (ex: 100px), not half pixel (ex 100,49px).

The problem is that if you have a document with half pixel anchor point near the edge of the file, webkit will round it to the closest pixel, and thus think that you have anchor points outside the document, and that will create the fixed scrollbar.

Answer 2

I have also noticed that upon examination of the SVG there may be an overflow value set. However if you remove this value, add enable-background, and make sure the SVG is rounded up or down and does not use a decimal point, it does fix the scroll bar issue in Chrome.

Try replacing:

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

with

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

Answer 3

In chrome the image seems slightly too big for the container.

Just add

overflow:hidden;

to the container in the CSS, this should stop scrollbars, either that or make the container slightly bigger.