Проблема с рендерингом маски CSS Safari ⇐ CSS

[Anonymous]

Я хотел бы использовать маску CSS для заголовка, чтобы создать изогнутый вырез изображения.
Для этого я хочу использовать технику CSS-маски. Поскольку мне нужна только изогнутая линия внизу, я использую два элемента для создания маски. Белый линейный градиент в качестве заполнителя и SVG с изогнутой линией для вырезания. Изображение растений было установлено в качестве фонового изображения.

Код: Выделить всё

.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 есть проблемы с рендерингом по нижнему краю. Вспышка фонового изображения высотой около 1 пикселя. Проблема возникает только при некоторой ширине экрана, поэтому я изменил размер окна, чтобы лучше отобразить эффект.


Могу только предположить, что при рендеринге возникла проблема в субпиксельной области.

Код: Выделить всё

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

Код: Выделить всё

Lorem Ipsum

Подробнее здесь: https://stackoverflow.com/questions/781 ... ring-issue