Прозрачность iframe Disqus не будет работать в Chrome 87

#wordpress #google-chrome #iframe #disqus

Вопрос:

После обновления до Chrome 87 я заметил, что прозрачность фона Disuqs не работает в темной теме — фон и текст белые, поэтому обсуждение нечитаемо.

Поскольку текст установлен на белый цвет, это означает, что Disqus распознает темную тему, но прозрачность фона не будет работать. Я вижу allowtransparency , что атрибут установлен:

Это отлично работает в старых версиях Chrome и Firefox:

На других сайтах я вижу, что у disqus нет проблем с темной темой в Chrome 87.

У кого-нибудь была такая проблема? Кто-нибудь знает, как это решить? К сожалению, я не могу рассчитывать на поддержку Disqus, потому что они не отвечают на электронные письма, а на их форуме мой пост об этой проблеме был признан спамом без причины.

РЕДАКТИРОВАТЬ: теперь я обнаружил, что этот мета-тег вызывает эту проблему: <meta name="color-scheme" content="dark light">

Можно ли решить эту проблему, не удаляя этот мета-тег?

Ответ №1:

ОК… Я нашел решение. Этот мета-тег вызвал проблему: <meta name="color-scheme" content="dark light">

Я удалил его и вместо этого добавил CSS-код, подобный этому:

 :root {
  color-scheme: light dark;
}

iframe {
  color-scheme: light;
}

https://github.com/w3c/csswg-drafts/issues/4772

1. @Rafaucau Спасибо, что поделились своим решением! У меня была такая же проблема, и это исправило ее. Тем не менее, мне все еще интересно, почему это исправлено. Если, например, в вашем коде вы измените цветовую схему для iframe на темную, она будет отображаться на белом фоне. Согласно теме w3c, которую вы связали, мне кажется, что фон должен быть темным. Есть мысли?

2. @Eaton в этом комментарии вы видите, почему iframe получает прозрачный фон при несоответствии цветовых схем: github.com/w3c/csswg-drafts/issues/4772#issuecomment-591553929 > Если цветовая схема iframe отличается от встраиваемого документа, iframe получает непрозрачный холст bg, соответствующий его цветовой схеме

Ответ №2:

Правильное решение — добавить css-фрагмент поддержки цветовой схемы как в родительский документ, так и в документ iframe. Это связано с тем, что фрагмент css сообщает браузеру, что для документа, к которому применяется css, реализованы как светлый, так и темный режимы. В нем ничего не говорится о поддержке документов, встроенных в iframe в этом документе.

 /* Apply this css fragment to both parent.html and iframe.html */
:root {
  color-scheme: light dark;
}