Weird "padding" issue with SVG in Chrome

[Steven]

Hi there,

I’m having an odd issue with my SVG background-image in Chrome. As you change the width of the browser, the SVG to bounce around on the y-axis. It seems to behave fine in Safari.

Here’s my pen:

http://codepen.io/swthate/pen/JYGNxy

Now, this is my first attempt with SVG and doing my own vector artwork (I’m using Affinity Design), so maybe it’s actually a problem with the artwork itself? I’m not sure… I wouldn’t think so because of the quirk appearing to only happen in Chrome.

What are your thoughts?

Thanks!

Edit:

Here’s a link to the raw SVG file. Maybe there’s something funky going on in it because of the export from Affinity Designer?
view-source:https://s3-us-west-2.amazonaws.com/s.cdpn.io/41586/town-small.svg

[bearhead]

I think the issue might be due to the background image being re-sized and having dimension values that aren’t whole integers. Then the browser rounds the dimensions when the page is rendered, and it results in the small gap and “bounce” effect.

You could hide the gap by changing the .level-one:before bottom attribute to 99%… The bounciness will still be there, but I think that makes it a lot less noticeable.

Maybe someone else can offer a more “real” solution…

[Steven]

Ah, I had thought about changing it to 99% to get around it. I’ll use this until something gets figured out.

I did notice an IE bug (unrelated to changing bottom to 99%).

It looks like IE (all versions) is completely ignoring background-size: cover on my pseudo element. When you shrink the width of the screen, the SVG background image keeps shrinking right along with it, causing it to “lift up” from the darker blue div underneath it. I tried looking around, but couldn’t find much of anything to help with this.

Any ideas?

EDIT:

Nevermind, fixed it with the help of http://stackoverflow.com/questions/21840551/background-size-with-svg-squished-in-ie9-10

Just had to declare width and height in the SVG.

[Author]

Posts