SVGを使ったセクション区切りで、SP表示のみ出てしまう線を消したい

Question

実現したいこと

SVGでの、Triangleシェイプを実装中です。
実装後のプレビューにて、本来のセクション部分に細い線が現れてしまい、それを消す方法がないか調べております。

またサイト上でも、検証ツールでみたところ、iPhoneXなどの特定デバイスで線が現れることを確認しました。
コードかSVGの記載に問題があるのではと調べておりますが、初めてのSVG実装なので解決できておりません。

発生している問題・エラーメッセージ

問題の起きているサイト（ジェネレーターのようなサイトです）
Custom Shape Dividers

検証ツールのSP表示（iPhoneXなど）の場合のみ、横線が出てきてしまう。

線が現れる条件
Shape：Triangle
Flip：Yes
Invert:Yes
bottom

閲覧環境
Mac
Chrome

補足情報

PCでは問題なく表示されます。
HTMLやCSSを変更することで解決するのであれば、このまま実装したいと考えています。

解決できる方お力添えいただけると幸いです。

よろしくお願いいたします。

Answer 1

Retinaディスプレイに元画像が対応しきれていないのでは？

iPhone X

画面解像度も2,436×1,125

iOS13時代のSVG表示設定方法

Comments

[WebBeginnerK]

ご返信遅くなり申し訳ありません。
デバイスのSVG対応については想定していませんでした。是非参考にさせていただきます。

また正しい解決法か不明ですが、positionプロパティを-1pxしたら、どのデバイスでも線が見えなくなったので、一旦解決として、環境テストも問題なければこれで実装します。

コメントいただきありがとうございました。

[kuma_kuma_]

SVGの拡大率が合わないとそのような現象が起こります。
対応は
「画像自体を大きくするか」(確実)
「計算上の位置をずらすか」(うまくいかない場合もあり。)
でしたので対応できてよかったですね。

Answer 2

正しい解決法か不明ですが、CSSのpositionプロパティを-1pxしたら、どのデバイスでも線が見えなくなったので、一旦解決として、環境テストも問題なければこれで実装します。

positionプロパティをbottom: -1px;に変更しました。

【ジェネレーターで出てくるCSS】
.custom-shape-divider-bottom-1602127575 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}

.custom-shape-divider-bottom-1602127575 svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 150px;
}

.custom-shape-divider-bottom-1602127575 .shape-fill {
fill: #FFFFFF;
}

【変更後】
.custom-shape-divider-bottom-1601789674 {
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;

svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 50px;
}

.shape-fill {
  fill: $base1;
}

}