wordpressgoogle-chromeiframedisqus

Disqus iframe transparency won't work on Chrome 87

After upgrading to Chrome 87, I noticed that Disuqs background transparency is not working on a dark theme - the background and text are white so the discussion is unreadable.

As the text is set to white it means that Disqus recognizes the dark theme but the transparency of the background won't work. I can see the allowtransparency attribute is set: enter image description here

This works fine on older versions of Chrome and Firefox: enter image description here

On the other websites, I can see that disqus has no problems with the dark theme on Chrome 87.

Anyone had such a problem? Anyone know how to solve this? Unfortunately, I can't count on Disqus support because they don't answer emails and on their forum my post about this problem has been recognized as spam for no reason.

EDIT: I have now found that this meta tag is causing this problem: <meta name="color-scheme" content="dark light">

Can this problem be solved without removing this meta tag?

Solution

  • Ok... I've found a solution. This meta tag caused the problem: <meta name="color-scheme" content="dark light">

    I removed it and instead added CSS code like this:

    :root {
  color-scheme: light dark;
}

iframe {
  color-scheme: light;
}

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