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

[Anonymous]

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

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

< /code>
и соответствующий CSS: < /p>
.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;
}
< /code>
Несмотря на то, что элемент переднего плана расположен на верхней части фона, некоторые черные пиксели с фона остаются видимыми по краям, почти как псевдоним или смешивание артефакта. Я попытался обратиться к этому, добавив: < /p>
backface-visibility: hidden;
transform: translateZ(0);
shape-rendering: geometricPrecision;
< /code>
… Но эти свойства не решали проблему.
Почему черные пиксели все еще видны, и как я могу гарантировать, что форма переднего плана полностью и чисто покрывает фон без этих краев? < /p>





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