CODEWITHSUNDEEP
cssgoogle-chromesvg
Tom Perkins
Tom Perkins

Reputation: 499

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,

Tom

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

Upvotes: 0

Views: 439

Answers (1)

Kerry7777
Kerry7777

Reputation: 4574

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;

Upvotes: 1

Related Questions