Почему эта фона градиента не идеальна? ⇐ Html

[Anonymous]

Сначала я думал, что это была некоторая проблема (

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

:root

устанавливается на 1.25 , который до сих пор делится на базовую 4px grid), но это не ...

• Удаление из примера или настройки высоты, делится на 4px Результаты в Pixel Perfect Grid (в настоящее время сломанное изображение) Явное настройка высоты разрывает фоновый градиент (выключен на половину px )

Так что это, кажется, является высотой . />

• Переверните изображение, чтобы увидеть проблему (от половины px с изображением-лучше всего просмотрено на рабочем столе)

Щелкните «Toggle Image» и возиться с настройкой .gl-baseline-grid :: After top . Легче просмотреть, если вы зажимаете и увеличиваете свой трекпад, чтобы увидеть его близко. class = "lang-css prettyprint-override">

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

:root {
--spacing: calc((24 / 16) * 1rem);
--spacing-quarter: calc((4 / 16) * 1rem);
--spacing-px: calc((1 / 16) * 1rem);
}

.gl-baseline-grid {
--baseline-grid-align-top: 0; // (2)
--baseline-grid-depth: -1;    // (3)
--baseline-grid-background: lightyellow;
--baseline-grid-color-line-one: #000;   // rgb(0, 139, 137)
--baseline-grid-color-line-two: #666; // rgb(133, 231, 231)
--baseline-grid-color-square: #FFD932;
--baseline-grid-size: var(--spacing); // --spacing
--baseline-grid-line-one: var(--baseline-grid-size);
--baseline-grid-line-two: var(--spacing-quarter);
--baseline-grid-opacity: 0.5;
--baseline-grid-square-size: var(--baseline-grid-size);

position: relative;
background: var(--baseline-grid-background);

// (4)
&::before {

background:
repeating-conic-gradient(
var(--baseline-grid-color-square) 0 25%,
transparent 0 50%
) 0 / var(--baseline-grid-square-size) var(--baseline-grid-square-size);

content: '';
display: block;
height: 100%;
mix-blend-mode: multiply;
position: absolute;  // (5)
top: var(--baseline-grid-align-top); // (5)
width: 100%;
z-index: calc(var(--baseline-grid-depth) + 1);
}

// (4)
&::after {
background:
linear-gradient(
0deg, var(--baseline-grid-color-line-one) var(--spacing-px),
transparent var(--spacing-px), transparent
),
linear-gradient(0deg,
var(--baseline-grid-color-line-two) var(--spacing-px),
transparent var(--spacing-px), transparent);
background-size:
auto var(--baseline-grid-line-one),
auto var(--baseline-grid-line-two);

content: '';
display: block;
height: 100%;
mix-blend-mode: multiply;
position: absolute;
top: var(--baseline-grid-align-top);
width: 100%;
z-index: calc(var(--baseline-grid-depth) + 1);

}
}

Вопросы

Что вызывает эта проблема и почему это влияет на фон градиенты? />
Так что даже если что -то технически «ломает» сетка 4px , это не видно в фоновом градиенте?>

Подробнее здесь: https://stackoverflow.com/questions/797 ... el-perfect