Не работает invert на html

Question

Если я применяю filter: invert(1); к html или body, то они работают как-то странно.

Я ожидал, что 3 следующие примера будут выглядеть одинаково, однако, с фильтром на html и body получается инвертирование только кнопок и текста

а если аналогичные стили применить в блоку, то ожидаемым образом инвертируется и фон:

Почему так происходит?

html {
  background: white;
  filter: invert(1);
}

<button>1</button> Не работает invert на html <button>2</button>

body {
  background: white;
  filter: invert(1);
}

<button>1</button> Не работает invert на html <button>2</button>

main {
  background: white;
  filter: invert(1);
}

<main>
  <button>1</button> Не работает invert на html <button>2</button>
</main>

Answer 1

¯\_(ツ)_/¯

html, body {
  background: white;
}

html {
  filter: invert(1);
}

<main>
  <button>1</button> Не работает invert на html <button>2</button>
</main>

Может такое быть, что фильтру нужен цвет, а background не наследуется? - @Doofy

Похоже это и есть ключ к разгадке.

Firefox показывает, что у html и body по дефолту background-color: rgba(0,0,0,0)(transparent), если же мы возьмём предыдущий пример и будем увеличивать значение aplha, то можно предположить, что как раз таки invertу нужна "подложка" из фона.
Но это не точно..

html, body {
  background-color: rgba(0,0,0,0);
  animation: A 2s steps(10) infinite;
}

html {
  filter: invert(1);
}

@keyframes A {
  100% {background-color: rgba(255,255,255,1);}
}

<main>
  <button>1</button> Не работает invert на html <button>2</button>
</main>

БЛОГ НА HUSL

Не работает invert на html

Ответы (1 шт):