Microsoft Edge выходит из-под контроля: темный режим на iOS ⇐ CSS

[Anonymous]

Темный режим Microsoft Edge, похоже, не работает на iOS. В Chrome/Safari/Firefox (iOS) и Chrome/Safari/Firefox/Edge (OSX/Windows) все работает как положено.
В идеале я бы хотел, чтобы Edge не использовал темный режим. совсем. Следующим лучшим вариантом было бы специально настроить Dark Mode Edge на iOS и добавить некоторые перезаписи CSS. Самое интересное, что у меня проблемы с последним, так как Edge на iOS почему-то тоже не слушает «предпочитает цветовую схему: темная».
Во-первых, я добавили этот метатег:

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

До того, как я это использовал:

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

Во-вторых, я добавил следующий CSS (согласно спецификации Chromium: https://developer.chrome.com/blog/auto-dark-theme):< /p>

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

:root {
color-scheme: only light;
}

Это отлично работает для перечисленных сред, не работает только Edge iOS.
Итак, я попытался перезаписать это, используя следующее, чтобы добавить цель CSS через JS.

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

$(document).ready(function(){
if (
window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches &&
/EdgiOS/.test(navigator.userAgent)
) {
document.body.classList.add('ios-edge-dark');
}
});

В сочетании с CSS следующим образом:

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

.ios-edge-dark {
.hero-type-2 {
.feature-icon {
filter: $main-filter-neg;
}
}
}

Именно здесь начинается настоящее «веселье»: Edge iOS правильно ориентирован, а код функционален. За исключением режима InCognito: когда пользователь включил это, второе условие (window.matchMedia('(prefers-color-scheme: dark)').matches) истинно и в облегченном режиме.
Поэтому я решил проверить, будет ли Edge iOS прослушивать медиа-запрос в CSS (да, я знаю, это не имело бы никакого смысла):

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

@media (prefers-color-scheme: dark) {
.ios-edge-dark {
.hero-type-2 {
.feature-icon {
filter: $main-filter-neg;
}
}
}
}

Вы уже догадались. Ничего. Edge (iOS, InCognito) считает, что темно. Когда он является. И нет.
На данный момент у меня нет идей (и я вспоминаю IE).
Я нашел недавнее сообщение это намекает на то, что другие испытывают те же проблемы, но реального решения не указано:
https://learn.microsoft.com/en-us/answe ... havior-in- Edge-on-ios
Надеюсь, у вас есть решение! На данный момент я очень хочу, чтобы это заработало, даже если оно включает в себя грязный обходной путь на основе JS, подобный тому, который я уже пробовал. Заранее спасибо!
P.S.: Постарался максимально подробно изложить проблему, надеюсь, помочь другим в будущем. Если вы столкнулись с той же проблемой, не стесняйтесь поделиться своими попытками ее решения. Я тоже с удовольствием их добавлю.

Подробнее здесь: https://stackoverflow.com/questions/783 ... ode-on-ios