0

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

Tom Perkins
  • 499
  • 3
  • 7
  • 16
  • Must be my crappy monitor? I can't see where you mean in the page? Could you take a zoomed screenshot or include an #anchor where you see the issue? I had a very small edge problem with an svg I made appearing in Chrome I worked around with a small stroke on the elements (not sure if this is any help to your particular issue)? – Kerry7777 May 23 '17 at 07:34
  • Sure, screenshot added. Sadly the stroke appears below the white gap so doesn't solve the issue. The SVG is added via CSS, do you think adding in HTML would make a difference? – Tom Perkins May 23 '17 at 07:38
  • 1
    For what it's worth: I checked the web page in chrome and don't see this white line. Edit: It show's up when I zoom. 110%, 125%, 150% and 200% (not 175%). – Philipp May 23 '17 at 07:41
  • Thanks Philipp, have you tried reducing the width of your browser window? The line doesn't appear at certain sizes, then grows as the window gets narrower, gets to a point then disappears again. – Tom Perkins May 23 '17 at 07:42
  • @TomPerkins Ah yes, I didn't resize enough. I see the line now even at standard zoom. – Philipp May 23 '17 at 07:44
  • Very frustrating isn't it. Anyone know why it's happening? – Tom Perkins May 23 '17 at 07:49

1 Answers1

1

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;
Kerry7777
  • 4,246
  • 1
  • 18
  • 28
  • Adding background-position:center calc(100% + 2px); worked a treat, thank you Kerry. will that be accepted by all browsers or should I provide some sort of fallback? – Tom Perkins May 23 '17 at 08:11
  • No worries. I think it should be pretty sweet. http://caniuse.com/calc/embed/ I love SVG's as well. – Kerry7777 May 23 '17 at 08:16
  • My bad. Actually just thinking about it again. I don't think we need the calc at all just background-position:center 2px; Same value with less work for the browser. – Kerry7777 May 23 '17 at 09:10