Как избежать несовпадения цветов фона во время переходов CSS с прозрачностью? ⇐ CSS

[Anonymous]

Сценарий
Недавно я сделал интересное наблюдение в своем CSS, и мне потребовалось некоторое время, чтобы точно понять, что происходит.
Например , рассмотрим следующий фрагмент кода, в котором родительский и дочерний элементы получают одинаковый фоновый цвет при заданном значении прокрутки. Оба элемента также имеют одинаковый переход, определенный для свойства фона.
При прокрутке обратите внимание, как явно различается цвет фона дочерних элементов. от цвета фона родительского элемента во время перехода.

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

function toggleClassOnScroll() {
const scrollPosition = window.scrollY;
const threshold = 40;

if (scrollPosition > threshold) {
document.body.classList.add("js-scrolled");
} else {
document.body.classList.remove("js-scrolled");
}
}

toggleClassOnScroll();
window.addEventListener("scroll", toggleClassOnScroll);

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

:root {
--scroll-transition: background 1s ease;
--scroll-background: darkgrey;
}

nav {
background-color: transparent;
transition: var(--scroll-transition);
}

.js-scrolled nav {
background-color: var(--scroll-background);
}

nav a {
background-color: transparent;
transition: var(--scroll-transition);
}

.js-scrolled nav a {
background-color: var(--scroll-background);
}

/* setup (visual) */

body {
min-height: 200vh;
}

nav {
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
border-bottom: 2px dashed var(--scroll-background);
width: 100%;
}

nav ul {
display: flex;
gap: 1rem;
margin: 0;
padding: 0;
list-style-type: none;
}

nav a {
position: relative;
display: block;
padding: 0.75em;
font-size: 1.5rem;
text-decoration: none;
color: black;
}

nav a:before {
content: "";
position: absolute;
inset: 0;
background-color: inherit;
mix-blend-mode: multiply;
opacity: 0;
}

nav a:hover::before,
nav a:focus::before {
opacity: 1;
}

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

[list]
[*][url=#]Colors[/url]
[*][url=#]Transparency[/url]
[*][url=#]Transitions[/url]
[*][url=#]About[/url]
[/list]

Обратите внимание, что в моем случае использования необходимо, чтобы дочерние элементы также получали цвет фона из-за эффекта наведения mix-blend-mode на ссылки на элементы навигации.

Результаты
Думаю, у меня есть этому объяснение (рендеринг) поведение различных цветов фона во время перехода:
Поскольку оба цвета фона имеют начальное значение прозрачности, альфа-канал вводится, который затем технически анимируется от 0 до 1, в результате чего при прокрутке определяется полный цвет.

Таким образом, это должно быть то же самое, что определение цвета фона, например, в rgb () нотация с начальным значением альфа 0 и установка для этого цвета альфа-значения 1 при прокрутке.

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

rgb(169 169 169 / 0) -> rgb(169 169 169 / 1)

Из-за перекрытия цветов фона с прозрачностью при переходе мы получаем разные цвета.

Это можно проиллюстрировать простой диаграммой Венна:

Атрибуция: Amousey, CC0, через Викимедиа Общее
Решение отсутствует
В зависимости от определенного цвета фона, продолжительности перехода и времени перехода function, лично меня такое поведение визуально сильно беспокоит.
Мне интересно, есть ли способ (или инструмент) предотвратить визуальную разницу во время перехода.

Возможно, существует математическая функция, которую можно использовать для вычислить это на основе целевого цвета, анимации и перекрывающегося слоя?

Или я думаю слишком сложно? Действительно ли такая ситуация распространена и существует ли («более простое») решение?

Подробнее здесь: https://stackoverflow.com/questions/793 ... transparen