4

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?

Bardt
  • 695
  • 1
  • 8
  • 17
  • I've got the exact same problem! Working well with Firefox. See http://i.imgur.com/cWoHZ.png – zopieux Oct 24 '11 at 08:13
  • Yup, here it is! Maybe we should send a ticket to chrome (or webkit) developers? I just don't know how to explain this issue well – Bardt Nov 04 '11 at 10:30

3 Answers3

8

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.

tinynow
  • 23
  • 1
  • 7
louim
  • 366
  • 2
  • 7
  • Do I miss something? SVG is a vector format. Does it use pixels as dimentions? – Bardt Nov 10 '11 at 06:12
  • This makes sense, although I'm curious if it reliably works. NB: Moving to the closest pixel is a bad idea if your native svg size is very small. Probably better to multiply everything by 100 or 1000. In any case, I'd rather have a solution that doesn't involve editing the svg itself. – Adam Fraser Feb 17 '12 at 00:55
  • This is a bug. This is happening on Chrome 36. A bug was filed, but missed the release branch by 2 commits. In 37 Beta it is fixed, and unfortunately we just have to wait... https://code.google.com/p/chromium/issues/detail?id=371250 – Steve Meisner Aug 13 '14 at 16:31
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.

Matthew Riches
  • 2,298
  • 18
  • 26
  • Maybe I explained the problem wrong: the container is mush larger then the background, and scrollbars are added to the background image, not the container. That is the most strange for me. – Bardt Jun 05 '11 at 08:07
1

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">
adamdunson
  • 2,635
  • 1
  • 23
  • 27
ControlZ
  • 185
  • 2
  • 16