使用getwaves.io波浪分隔时移动端浏览器出现意外水平线问题

我是前端初学者，正在开发简洁风格网站，用getwaves.io生成的波浪元素分隔不同section/div，每个波浪对应不同颜色。电脑端Safari、Chrome、Firefox显示完全正常，但在iPhone的Safari和Chrome里，只有第一个波浪显示正常，其余波浪和上方section之间都出现一条细水平线，找不到问题原因。

问题截图 #

相关代码 #

CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@100;300;900&display=swap');

body,html{
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    max-width: 100%;
    overflow-x: hidden;
}
h1 {
    font-size: 5em;
    margin:0;
    padding:0;
    letter-spacing: 5px;
}
h2 {
    font-size: 3em;
    margin:0;
    padding:0;
}
h3 {
    font-size: 2em;
    margin:0;
    padding:0;
}
h4 {
    margin:0;
    padding:0;
    font-size: 1.25rem;
}

p {
    font-family: 'Prompt', sans-serif;
    font-weight: 300;
    line-height: 1.7em;
}

a {
    font-family: 'Prompt', sans-serif;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.7em;
}

.section{
    text-align: center;
    align-items: center;
    min-height: 100vh;
    background-size: cover;
}

#section0 {
    background-color: #d4b4b4;
}
#section1 {
    background-color: #d7d7d7;
}
#section2 {
    background-color: #474747;
}
#section3 {
    background-color: #f0f0f0;
}
#section4 {
    background-color: #d4b4b4;
}
#section-footer {
    background-color: #383838;
}

HTML代码 #

<div class="section" id="section0">
    <nav>
        <!-- 导航栏代码，此处省略 -->
    </nav>
        <img class="logo" src="pegasus-logo2.png" alt="logo" width="300px" />
        <h1>PERSEUS</h1><br><br><h4 style="letter-spacing: 10px; font-family: 'Prompt', sans-serif; font-weight: 100;">Un site pour vous ?</h4>
</div>
<!-- SECTION 1 -->
<div class="section" id="section1">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 192"><path fill="#d4b4b4" fill-opacity="1" d="M0,0L120,26.7C240,53,480,107,720,138.7C960,171,1200,181,1320,186.7L1440,192L1440,0L1320,0C1200,0,960,0,720,0C480,0,240,0,120,0L0,0Z"></path></svg>
    <div class="rows">
        <div class="column1">
            <h2 style="text-align: center;">Section 1</h2><br>
            <p>
                <!-- 文本内容省略 -->
            </p><br><br>
        </div>
    </div>
</div>
<!-- SECTION 2 -->
<div class="section" id="section2">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 192"><path fill="#d7d7d7" fill-opacity="1" d="M0,0L120,26.7C240,53,480,107,720,138.7C960,171,1200,181,1320,186.7L1440,192L1440,0L1320,0C1200,0,960,0,720,0C480,0,240,0,120,0L0,0Z"></path></svg>
    <div class="rows">
        <h2 style="text-align: center; color: #f0f0f0;">Section 2</h2><br>
        <div class="column2">
            <p style="color: #f0f0f0;">
                <!-- 文本内容省略 -->
            </p>
        </div>
        <div class="column2">
            <p style="color: #f0f0f0;">
                <!-- 文本内容省略 -->
            </p>
        </div>
    </div>
</div>
<!-- SECTION 3 -->
<div class="section" id="section3">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 192"><path fill="#474747" fill-opacity="1" d="M0,0L120,26.7C240,53,480,107,720,138.7C960,171,1200,181,1320,186.7L1440,192L1440,0L1320,0C1200,0,960,0,720,0C480,0,240,0,120,0L0,0Z"></path></svg>
    <div class="rows">
        <h2 style="text-align: center; color: #565656;">Section 3</h2><br>
        <div class="column3">
            <p style="color: #565656;">
                <!-- 文本内容省略 -->
            </p>
        </div>
        <div class="column3">
            <p style="color: #565656;">
                <!-- 文本内容省略 -->
            </p>
        </div>
        <div class="column3">
            <p style="color: #565656;">
                <!-- 文本内容省略 -->
            </p>
        </div>
    </div>
</div>

解决方案 #

这个问题是iOS Safari/Chrome的渲染精度误差导致的，SVG与section间的1px间隙源于小数像素计算偏差，试试以下几种解决办法：

1. 给SVG添加负margin
   直接将SVG向上偏移1px覆盖细线：

.section svg {
    margin-top: -1px;
}

2. 设置SVG为块级元素
   默认SVG是inline元素，可能因行高产生间隙，改为block可消除：

.section svg {
    display: block;
}

3. 用transform微调位置
   通过translateY偏移，避免margin可能引发的布局问题：

.section svg {
    transform: translateY(-1px);
}

通常第一种方法就能快速解决问题，可根据自身布局选择适配方案。

内容的提问来源于stack exchange，提问作者user19939127