Die Disqus-Iframe-Transparenz funktioniert unter Chrome 87 nicht

Lesezeit: 2 Minuten

Rafaucaus Benutzeravatar
Rafaucau

Nach dem Upgrade auf Chrome 87 ist mir aufgefallen, dass die Hintergrundtransparenz von Disuq bei einem dunklen Thema nicht funktioniert – der Hintergrund und der Text sind weiß, sodass die Diskussion nicht lesbar ist.

Da der Text auf Weiß eingestellt ist, bedeutet dies, dass Disqus das dunkle Thema erkennt, die Transparenz des Hintergrunds jedoch nicht funktioniert. Ich kann das sehen allowtransparency Attribut ist gesetzt:
Geben Sie hier eine Bildbeschreibung ein

Dies funktioniert gut auf älteren Versionen von Chrome und Firefox:
Geben Sie hier eine Bildbeschreibung ein

Auf den anderen Websites kann ich sehen, dass disqus keine Probleme mit dem dunklen Theme auf Chrome 87 hat.

Hatte jemand so ein Problem? Weiß jemand, wie man das löst? Leider kann ich nicht auf den Support von Disqus zählen, da sie keine E-Mails beantworten und mein Beitrag zu diesem Problem in ihrem Forum ohne Grund als Spam erkannt wurde.

EDIT: Ich habe jetzt herausgefunden, dass dieses Meta-Tag dieses Problem verursacht: <meta name="color-scheme" content="dark light">

Kann dieses Problem gelöst werden, ohne dieses Meta-Tag zu entfernen?

Ok … ich habe eine Lösung gefunden. Dieses Meta-Tag verursachte das Problem: <meta name="color-scheme" content="dark light">

Ich habe es entfernt und stattdessen CSS-Code wie diesen hinzugefügt:

:root {
  color-scheme: light dark;
}

iframe {
  color-scheme: light;
}

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

  • @Rafaucau Vielen Dank für das Teilen Ihrer Lösung! Ich hatte das gleiche Problem und das hat es behoben. Allerdings frage ich mich immer noch Warum es hat es behoben. Wenn Sie beispielsweise in Ihrem Code das Farbschema für iframe auf dunkel ändern, wird es mit einem weißen Hintergrund gerendert. Laut dem von Ihnen verlinkten W3C-Thread sollte der Hintergrund meiner Meinung nach stattdessen dunkel sein. Irgendwelche Gedanken?

    – Eaton

    26. September 2021 um 17:08 Uhr

  • @Eaton in diesem Kommentar sehen Sie, warum Iframe einen transparenten Hintergrund erhält, wenn die Farbschemata nicht übereinstimmen: github.com/w3c/csswg-drafts/issues/4772#issuecomment-591553929 > Wenn das Farbschema eines Iframes vom eingebetteten Dokument abweicht, erhält der Iframe einen undurchsichtigen Canvas-Hintergrund, der seinem Farbschema entspricht

    – sergeyski.com

    19. Februar 2022 um 19:58 Uhr

Die richtige Lösung besteht darin, das CSS-Fragment zur Farbschemaunterstützung sowohl zum übergeordneten Dokument als auch zum Iframe-Dokument hinzuzufügen. Dies liegt daran, dass das CSS-Fragment dem Browser mitteilt, dass für das Dokument, auf das das CSS angewendet wird, sowohl der Hell- als auch der Dunkelmodus implementiert sind. Es sagt nichts über die Unterstützung für Dokumente aus, die in einem Iframe innerhalb dieses Dokuments eingebettet sind.

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

  • Dies ist eine gute Antwort, allerdings ist disqus ein Drittanbieter und fügt derzeit kein Farbschema hinzu. Aus diesem Grund wird eine andere Antwort akzeptiert.

    – sergeyski.com

    19. Februar 2022 um 21:23

1451050cookie-checkDie Disqus-Iframe-Transparenz funktioniert unter Chrome 87 nicht

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy