CODEWITHSUNDEEP
cssgoogle-chromebackgroundsvg
Bardt
Bardt

Reputation: 705

Strange scrollbars around the svg background in chrome

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?

Upvotes: 4

Views: 2805

Answers (3)

ControlZ
ControlZ

Reputation: 181

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">

Upvotes: 1

louim
louim

Reputation: 376

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.

Upvotes: 8

Matthew Riches
Matthew Riches

Reputation: 2286

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.

Upvotes: 3

Related Questions