Как указать mix-blend-mode для троюродного брата элемента?

Question

[Roman Fov]

Всем привет!
Ковыряюсь в режимах смешивания CSS.
Хочу применить один из режимов к навигационному меню.
Тут меня подстерегла проблема.

<div class="page">
  <div class="page__header">
    <div class="header">
      <nav class="nav header__nav">Nav</nav>
    </div>
  </div>
  <div class="content page__content">
    <div class="content__screen content__screen_hola">Hi</div>
    <div class="content__screen content__screen_records">Records</div>
    <div class="content__screen content__screen_contacts">Contacts</div>
  </div>
</div>

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

.page__header {
  position: fixed;
  height: 100%;
  background: transparent;
}

.page {
  height: 100%;
}

.page__content {
  height: 100%;
}

/*
Проблема здесь!
Указываем режим смешивания для .header или .nav и всё работает не так как надо.
*/
.header {
  mix-blend-mode: difference;
}

.nav {
  font: bold 2rem sans-serif;
  color: white;
  padding: .4em;
}

.content__screen {
  height: 100%;
  text-align: center;
  &_hola {
    background: #222;
    color: #fff;
  }
  &_records {
    background: #fff;
    color: #222;
  }
  &_contacts {
    background: #222;
    color: #fff;
  }
}

Зато если указывать режим смешивания для .page__header, то всё начинает отображаться как задумано. Но я не хочу применять режим смешивания ко всей шапке (там логотип радующий пользователей всеми цветами радуги и иконки социальных сетей).
Да и хочется складывать стили для отображения блока ближе к самому блоку.

Если коротко, то
Так работает:
https://jsfiddle.net/L7ex9gk9/1/
Так нет:
https://jsfiddle.net/znohd8pp/1/

Вопроса два:
Как в таком случае указать режим смешивания только для навигации?
Чем обусловлено такое странное поведение режимов смешивания в CSS?

Answer 1

[cssfish]

отвечу в обратном порядке

2. ну видимо тем что слой смешивается с родительским и выше по дереву не лезет.
css-live.ru/articles/o-rezhimax-nalozheniya-v-css-...

Учтите, что mix-blend-mode применяется к элементу и ко всем его потомкам

т.е. если дать стиль page__header, он смешивается (и что в нем- с ним смешивается). а вот если его потомку дать стиль, то он ни с чем кроме page__header уже не смешается.

видимо так, но точной инфы конечно маловато

1. выкатить навигацию в отдельный слой на один уровень с .page__header и .content
типа того- https://jsfiddle.net/znohd8pp/3/

upd.
либо пробовать isolate, но у меня что-то на скорую руку не вышло ничего вменяемого.