Форма переднего плана не полностью закрывает фон — черные пиксели видны сквозь передний план в перекрывающихся элементах ⇐ Html

[Anonymous]

Я работаю над макетом, в котором два круглых элемента div точно перекрываются — один действует как черный фон, а другой — как серый передний план, — используя абсолютное позиционирование внутри контейнера. Вот упрощенная версия кода:

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

И соответствующий CSS:

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

.shape {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;

backface-visibility: hidden;
transform: translateZ(0);
shape-rendering: geometricPrecision;
}

#background {
background: black;
}

#foreground {
background: gray;
}

Несмотря на то, что элемент переднего плана расположен поверх фона, некоторые черные пиксели фона остаются видимыми по краям, почти как артефакт сглаживания или смешивания. Я попытался решить эту проблему, добавив:

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

backface-visibility: hidden;
transform: translateZ(0);
shape-rendering: geometricPrecision;

…но эти свойства не решили проблему.
Почему черные пиксели все еще видны и как я могу гарантировать, что фигура переднего плана полностью и чисто покрывает фон без этих артефактов по краям?

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

Document


* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;

background-color: gray;
}

.container {
position: relative;
display: inline-block;

width: 400px;
height: 300px;
}

.shape {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;

backface-visibility: hidden;
transform: translateZ(0);
shape-rendering: geometricPrecision;
}

#background {
background: black;
}

#foreground {
background: gray;
}

Мне нужна помощь в решении этой проблемы, а не поиск хаков или экспериментов с масштабированием формы переднего плана, чтобы охватить большую площадь, чем фон.
Проблема:



Подробнее здесь: https://stackoverflow.com/questions/796 ... -through-f