实现波浪mask渐变时出现直线条问题求助

在实现波浪mask渐变效果时，我遇到了意外的直线条问题，而非预期的波浪边缘。我已检查CSS属性和HTML标记，但该异常仍存在，恳请各位提供排查思路或解决方案！
在尝试创建波浪mask渐变时，出现了奇怪的直线条现象，我已确认包括WebKit线性渐变在内的CSS属性无误，但问题依旧，针对该问题的排查建议将对我非常有帮助！

相关代码 #

CSS 代码

#mainNav {
    // position: fixed;
    width: 100vw;
    padding-top: 0.25rem;
    padding-bottom: 0.75rem;
    background-color: pink;
    --mask:
        radial-gradient(21.22px at 50% calc(100% - 29.15px), #000 99%, #0000 101%) calc(50% - 22px) 0/44px 100%,
        radial-gradient(21.22px at 50% calc(100% + 18.15px), #0000 99%, #000 101%) 50% calc(100% - 11px)/44px 100% repeat-x;
    -webkit-mask: var(--mask);
    mask: var(--mask);


    .navbar-toggler {
        padding: 0.5rem;
        // font-size: 0.75rem;
        font-family: $headings-font-family;
        text-transform: uppercase;
        font-weight: $font-weight-bold;

        i {
            font-size: 30px;
        }
    }

    .navbar__logo {
        // position: absolute;
        z-index: 10;
        max-width: 125px;
        // transform: translateY(60); 
        // flex-shrink: 5;
        // clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);   
        -webkit-filter: drop-shadow(5px 5px 5px #ffffff);
        filter: drop-shadow(5px 5px 5px #ffffff);

        &--hyperlink{
            display:inline-block;
        }
    }

    .navbar-nav {
        .nav-item {
            font-family: $headings-font-family;
            // font-size: 1.1rem;
            font-size: 1.25rem;
            font-weight: 900;
            letter-spacing: $headings-letter-spacing;

            .nav-link {
                // color: $white;
                color: #ffa0b1;

                &.active,
                &:hover {
                    color: $primary;
                }

                &--landing {
                    text-decoration: none;
                    color: $white;

                    &.active,
                    &:hover {
                        color: $primary;
                    }
                }
            }
        }
    }
}


@include media-breakpoint-up(md) {
    #mainNav {
        padding-top: 1rem;
        padding-bottom: 1rem;
        border: none;
        background-color: transparent;
        transition: padding-top 0.5s ease-in-out,
            padding-bottom 0.5s ease-in-out;

        .navbar__logo {
            transition: max-height 0.5s ease-in-out;
            max-width: 150px;
        }

        &.navbar-shrink {
            background-color: pink;
            --mask:
                radial-gradient(32.00px at 50% calc(100% - 45.15px), #000 99%, #0000 101%) calc(50% - 42px) 0/84px 100%,
                radial-gradient(32.00px at 50% calc(100% + 24.15px), #0000 99%, #000 101%) 50% calc(100% - 21px)/84px 100% repeat-x;
            -webkit-mask: var(--mask);
            mask: var(--mask);
            top: -100px;
            margin-top: 100px;
            transition: margin-top 0.7s;
            color: white;
        }

        .navbar-nav .nav-item {
            font-size: 1rem;
            margin-right: 0.5rem;

            &:last-child {
                margin-right: 0;
            }
        }
    }
}

@include media-breakpoint-up(lg) {
    #mainNav {
        .navbar__logo {
            max-width: 175px;
        }
        .navbar-nav .nav-item {
            font-size: 1.4rem;
            margin-right: 0.75rem;
        }
    }
}

HTML 代码

<nav class="navbar navbar-expand-sm fixed-top" id="mainNav">
    <div class="container">
        <a href="index.html">
            <img class="navbar__logo" src="../img/logoFix.png" alt="..." />
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive"
            aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <i class="fas fa-bars ms-1"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav text-uppercase ms-auto py-4 py-lg-0">
                <li class="nav-item"><a class="nav-link" href="offer.html">Oferta</a></li>
                <li class="nav-item"><a class="nav-link" href="gallery.html">Galeria</a></li>
                <li class="nav-item"><a class="nav-link" href="about.html">O mnie</a></li>
                <li class="nav-item"><a class="nav-link" href="news.html">Aktualności</a></li>
                <li class="nav-item"><a class="nav-link" href="#footer">Kontakt</a></li>
            </ul>
        </div>
    </div>
</nav>

排查思路与解决方案 #

• 校准mask渐变的尺寸与定位：当前mask里的两个径向渐变，尺寸和偏移量需要完全匹配，避免出现间隙或重叠。建议把非整数的半径（如21.22px）换成整数，减少计算误差，确保波浪完全衔接。
• 明确mask的重复与叠加规则：显式设置-webkit-mask-repeat: repeat-x;和mask-repeat: repeat-x;，同时根据浏览器调整mask-composite属性（Chrome用source-over，Firefox用add），保证两个渐变正确叠加形成连续波浪。
• 排查容器布局干扰：#mainNav使用width:100vw可能和内部container类的padding冲突，导致mask被截断。给#mainNav添加overflow: hidden，或者调整container的内边距，避免mask显示不全出现直线。另外，navbar-shrink里的top:-100px和margin-top:100px可能改变容器高度，影响mask的显示范围，建议去掉或调整这两个属性测试。
• 简化代码定位问题：先移除过渡、嵌套样式等非必要代码，只保留基础mask样式，看是否还出现直线。如果正常，再逐步添加其他样式，排查冲突点。
• 兼容不同浏览器解析：不同浏览器对mask属性的径向渐变计算有差异，尝试用固定像素值代替calc表达式，减少跨浏览器的解析误差。

内容的提问来源于stack exchange，提问作者Krystian Dopierała