Safari浏览器CSS mask-image底部边缘1px渲染异常求助

我通过CSS mask技术实现头部图片的弧形裁剪效果，使用mask-image属性结合白色线性渐变与带弧形路径的SVG，并配置mask-composite等属性，将植物图片设为背景图。核心实现代码如下：

.masked-section
{
    background-image: url(../background.jpg);
    -webkit-mask-image: url(../HeaderMask.svg), linear-gradient(white, white);
    mask-image: url(../HeaderMask.svg), linear-gradient(white, white);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    -webkit-mask-position: bottom, top;
    mask-position: bottom, top;
    -webkit-mask-size: contain, cover;
    mask-size: contain, cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

该效果在Chrome和Firefox中表现正常，但在Safari浏览器中，底部边缘会出现约1px的背景图片穿透（仅在部分屏幕宽度下出现），调整窗口尺寸可更清晰观察此现象：

我推测这是子像素渲染层面的问题。以下是可复现的完整代码片段：

CSS代码 #

body
{
  background-color: #fefefe;
}

#header
{
  background-image: url('https://cdn.pixabay.com/photo/2018/01/31/07/36/secret-3120483_1280.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  
  aspect-ratio: 3 / 1;
  
   -webkit-mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+Cjxzdmcgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDI1MDAgMTIyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zOnNlcmlmPSJodHRwOi8vd3d3LnNlcmlmLmNvbS8iIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MjsiPgogICAgPGcgaWQ9Il8yMTAiPgogICAgICAgIDxwYXRoIGQ9Ik0wLDBDMCwwIDkzLjg1Nyw3Mi4wODQgMjI2LjIzLDU1LjM4QzQ0OS45MjQsMjcuMTUyIDY3NS44OCwzOC4yOTMgODM3LjQ2NSw3Mi4wODRDOTU3LjI3NCw5Ny4xMzkgMTI5NC44OCwtNy4xODEgMTQ5Ni45Nyw1NS4zOEMxNzA1LjcyLDEyMCAxOTUxLjIsMzcuMTk0IDIxMjUuNjgsNzIuMDg0QzIyOTkuNzEsMTA2Ljg4NCAyMjU3LjUyLDY1Ljg4IDI1MDAsMTIwQzI1MDAuMDEsMTIwLjAwNiAyNTAwLjAxLDEyMS45NzcgMjUwMCwxMjJMMCwxMjJMMCwwWiIgc3R5bGU9ImZpbGw6cmdiKDI5LDI5LDI3KTtmaWxsLXJ1bGU6bm9uemVybzsiLz4KICAgIDwvZz4KPC9zdmc+Cg=='), linear-gradient(white, white);
    mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+Cjxzdmcgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDI1MDAgMTIyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zOnNlcmlmPSJodHRwOi8vd3d3LnNlcmlmLmNvbS8iIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MjsiPgogICAgPGcgaWQ9Il8yMTAiPgogICAgICAgIDxwYXRoIGQ9Ik0wLDBDMCwwIDkzLjg1Nyw3Mi4wODQgMjI2LjIzLDU1LjM4QzQ0OS45MjQsMjcuMTUyIDY3NS44OCwzOC4yOTMgODM3LjQ2NSw3Mi4wODRDOTU3LjI3NCw5Ny4xMzkgMTI5NC44OCwtNy4xODEgMTQ5Ni45Nyw1NS4zOEMxNzA1LjcyLDEyMCAxOTUxLjIsMzcuMTk0IDIxMjUuNjgsNzIuMDg0QzIyOTkuNzEsMTA2Ljg4NCAyMjU3LjUyLDY1Ljg4IDI1MDAsMTIwQzI1MDAuMDEsMTIwLjAwNiAyNTAwLjAxLDEyMS45NzcgMjUwMCwxMjJMMCwxMjJMMCwwWiIgc3R5bGU9ImZpbGw6cmdiKDI5LDI5LDI3KTtmaWxsLXJ1bGU6bm9uemVybzsiLz4KICAgIDwvZz4KPC9zdmc+Cg=='), linear-gradient(white, white);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    -webkit-mask-position: bottom, top;
    mask-position: bottom, top;
    -webkit-mask-size: contain, cover;
    mask-size: contain, cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

#content1
{
  padding: 3rem;
}

HTML代码 #

<section id="header">
</section>
<section id="content1">
Lorem Ipsum
</section>

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