Tom Perkins Tom Perkins - 1 year ago 84
CSS Question

Space appearing beneath SVG (only in Google Chrome)

I'm building a site that has a number of curves that have been created using SVG's.

These work perfectly in all browsers apart from Chrome where they appear to reduce in height very slightly at certain browser widths, leaving a small white space beneath.

You can see what I mean here.

I have specified width, max-width, height and max-height as this question suggested without success.

Any ideas on why this is happening and how to solve?

Thanks in advance,


EDIT: Here's a screenshot to show what I mean. The purple curve shouldn't have the thin white line along the top edge:

enter image description here

Answer Source

Rough hack. Maybe the calc could just be done with 101%?

.homepage_intro_section.purple.dark_purple_below .curve
   background-position:center calc(100% + 2px);

.dark_purple .curve
    background-position: center -3px;

I think you have some minor issues with your bg alignments as well (duplicate)?

.dark_purple .curve {
    background: url(../svg/extended-curve-purple-to-white.svg) center bottom no-repeat, none center no-repeat;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download