Direkt zum Hauptinhalt

BrowserSource flackert

Flackern der BrowserSource zeigt sich als: kurzzeitiges Schwarz, weisse Frames, Tearing bei Animationen, oder ein Aufblitzen direkt nach einem Reaction-Trigger. In ueber 90% der Faelle ist das kein Chatlix-Problem, sondern Hardware-Acceleration im Chromium-Embed von OBS. Wenn du unsicher bist, ob das Overlay ueberhaupt korrekt laedt (statt zu flackern), pruef zuerst die Seite « Overlay laedt nicht » — Ladeprobleme und Flacker-Probleme haben unterschiedliche Ursachen und werden oft verwechselt.

Reihenfolge der Workarounds

1. BrowserSource neu hinzufuegen

Klingt billig, hilft aber oft. OBS cached Render-State pro Source. Wenn die Source aus einer alten OBS-Version stammt oder oft umkonfiguriert wurde, kann der Render-Context inkonsistent sein.

  • Aktuelle BrowserSource im Source-Panel rechtsklicken → « Eigenschaften » — kopiere die URL.
  • Source loeschen.
  • Neue BrowserSource mit derselben URL anlegen.
  • Width/Height auf die tatsaechliche Ausgabe-Aufloesung setzen (meist 1920 × 1080), nicht skalieren.
  • « Browser-Cache aktualisieren wenn Szene aktiv wird » aktivieren.

Das behebt rund die Haelfte der Flacker-Reports.

2. Hardware-Acceleration in OBS togglen

OBS Studio nutzt Chromium fuer BrowserSources. Auf manchen GPU-Treibern (besonders aelteren NVIDIA-Versionen und Intel-iGPUs) kommt es bei aktivierter Hardware-Acceleration zu Tearing.

  • OBS → Einstellungen → Erweitert → Quellen (in englischen Versionen Settings → Advanced → Sources).
  • « Hardware-Acceleration fuer Browser-Quellen » toggeln (an → aus oder umgekehrt) und OBS neu starten.

Das Toggle hat zwei Richtungen: auf manchen Systemen hilft on, auf anderen off. Probier beides aus. Notiere dir, welche Richtung bei deinem System geholfen hat — falls du spaeter den Support kontaktierst, ist das eine wichtige Info fuer die GPU/Treiber-Zuordnung.

3. Custom-CSS Hack

Einige Overlays flackern, weil OBS Frames waehrend des Compositings dropped. Ein hartes transform: translateZ(0) zwingt Chromium, das Element in einen eigenen Compositor-Layer zu legen — Tearing ist dann meist weg.

Im OBS BrowserSource Properties-Dialog gibt es das Feld Custom CSS. Standardmaessig steht da bereits ein body { background-color: rgba(0, 0, 0, 0); }. Erweiter es um:

body {
  background-color: rgba(0, 0, 0, 0);
  transform: translateZ(0);
  backface-visibility: hidden;
}

Nach « OK » neu zeichnet OBS die Source. Wenn das Flackern weg ist, war es ein Compositor-Layer-Issue.

4. OBS-Version pruefen

Fuer Chatlix-Overlays empfehlen wir OBS Studio 30.x oder neuer. OBS 28/29 haben Chromium-Versionen, die mit modernen CSS-Animations Tearing zeigen. OBS 27 und aelter unterstuetzen zudem nur das alte obs-websocket-v4-Protokoll — das betrifft zwar primaer Connect/OBS-Actions (siehe « Reward erstellt aber nichts passiert », Schritt 4), aber alte OBS-Versionen haben generell auch aeltere, fehleranfaelligere Chromium-Embeds fuer BrowserSources.

  • OBS → Hilfe → Ueber zeigt die Version.
  • Update direkt von obsproject.com.

Nach einem OBS-Update kann das Browser-Cache aktualisieren einmal manuell ausgeloest werden (Rechtsklick auf Source → Aktualisieren).

Wenn das Flackern nur bei bestimmten Effects auftritt

Manche Reaction-Effects (vor allem Particle-basierte) zeigen auf low-end-GPUs Stutter, der wie Flackern aussieht. In dem Fall:

  • Im Reaction-Editor unter /dashboard/reactions/<id> die Particle-Density reduzieren.
  • Effect-Dauer auf < 3s setzen, falls aktuell laenger.
  • Animations-Easing auf linear statt spring setzen — Spring-Easing rendert auf manchen GPUs mehr Zwischenframes.

Wenn das Flackern nur im Aufnahme-Output ist, nicht im Preview

Das deutet auf einen Encoder-Bottleneck hin, nicht auf BrowserSource. Pruefe in OBS unter Statistiken die Frame-Drops. Wenn Encoder verpasste Frames > 0, hat dein Encoder Performance-Probleme — das kann mit einer Reduzierung der Output-Aufloesung, einem Wechsel auf NVENC/x264-CPU oder einer niedrigeren Bitrate behoben werden.

Wenn du mehrere Chatlix-Overlays gleichzeitig laufen hast

Jede BrowserSource mit einer Chatlix-Overlay-URL ist eine eigene, unabhaengige Browser-Instanz (siehe « Overlay laedt nicht », Abschnitt « Mehrere Overlays parallel »). Mehrere parallele Instanzen erhoehen die GPU-Last spuerbar und koennen auf schwaecheren Systemen zu Frame-Drops fuehren, die wie Flackern aussehen. Bei Verdacht: temporaer alle bis auf eine BrowserSource deaktivieren und testen, ob das Flackern verschwindet.

Wenn alles oben nicht hilft

Mach einen 30-Sekunden-Mitschnitt mit sichtbarem Flackern, notier OBS-Version, GPU und Treiber-Version und schick es an den Support. Wir koennen anhand des Pattern oft auf GPU-Treiber-Bugs schliessen, fuer die es konkrete Workarounds gibt.

Siehe auch: « Overlay laedt nicht », « Audio reagiert nicht ».