SVGの下に表示されるスペース（Google Chromeのみ）

Question

SVGを使用して作成された多数の曲線を持つサイトを構築しています。

これらは、Chrome以外のブラウザでも完全に機能し、特定のブラウザの幅では高さがわずかに低下するように見え、その下に小さな空白が残っています。

私はhereの意味を理解できます。

this questionとして、幅、最大幅、高さ、最大高さを指定しました。

なぜこれが起こっているのか、どのように解決するのかについてのアイデアはありますか？

事前のおかげで、

トム

EDIT：ここで私が何を意味するか表示するスクリーンショットです。

Answer 1

ラフハック：紫の曲線は、上部の縁に沿って細い白線を持つべきではありません。たぶんcalcはちょうど101％で行えるのでしょうか？

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

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

あなたのbgアライメントにもいくつかマイナーな問題があると思いますか？

.dark_purple .curve { 
    background: url(../svg/extended-curve-purple-to-white.svg) center bottom no-repeat, none center no-repeat;