Safari css mask rendering issue

Question

I would like to use a css mask for a header to create a curved cut for an image.

For this I want to use the css technique mask-image. Since I only want the curved line at the bottom, I'm using two elements to create the mask. A white linear gradient as a filler and an SVG with the curved line to cut out. The image of the plants was set as an background-image.

.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;
}

Everything works fine in Chrome and Firefox. Only in Safari there are problems with rendering at the bottom edge. A flash through the background image of around 1px height. The problem only occurs at some screen widths, so I resized the window to show the effect better.

I can only assume that there is a problem in the subpixel area when rendering.

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;
}

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