Kürzlich hatte ich das Problem, dass das Layout meiner Website (mit WPBakery Page Builder, ehemals Visual Composer erstellt) in Firefox und Internet Explorer bzw. Edge nicht mehr richtig dargestellt bzw. gerendert wurde. Es wurde ein sehr unschöner weißer Balken links angezeigt, der dadurch entstand, dass der ganze Content nach rechts verschoben war.

Was war das Problem?

Die Funktion „Stretch Row“ macht Probleme

Im WPBakery Page Builder gibt es die Funktion „Stretch Row“. Damit kann man Zeilen, die normalerweise auf die Inhaltsbreite einer Website limitiert sind (bspw. 1080px) auf 100% Bildschirmbreite einstellen. Das ist z.B. für Call to Actions wichtig, die als durchgehender Querbalken angezeigt werden sollen oder für Sektionen mit farbigem Hintergrund. Es lassen sich damit wunderschöne Designs erstellen.

Das Problem war jedoch: Eines Tages stellte ich fest, dass alle Seiten meiner Website, die gedehnte Zeilen, also Zeilen mit der Funktion „Stretch Row“ verwenden, in Firefox und Edge nicht mehr richtig dargestellt also gerendert werden. Auch in Chrome kam es vereinzelt zu Darstellungsfehlern. In allen drei Browsern verschwanden die Darstellungsfehler, wenn man die Größe des Browserfensters veränderte. Wirklich ein typischer Rendering-Fehler.

Doch was war die Lösung?

Die Lösung für das WPBakery Page Builder „Stretch Row“ Problem

Ich schrieb dem Support von WPBakery Page Builder, der mir antwortete:

„Hallo, soweit wir sehen, ist das kein Bug unsererseits. Das Problem rührt wahrscheinlich daher, dass gewisser Code das Full Width Script daran hindert, komplett zu rendern, weshalb es nicht in der Lage ist, das notwendige CSS anzuwenden.“

Hast du das verstanden?

Wenn nicht, halb so schlimm. Im Prinzip geht es darum, ob einen störenden Code zu finden, der verhindert, dass die Website richtig dargestellt wird.

Mein Verdacht viel sofort auf die Komprimierungs- und Cache-Plugins wie Autoptimize und „WP Super Cache“. Also deaktivierte ich eines nach dem anderen, um zu sehen, ob der Fehler dadurch behoben wurde und

Voila!

Nachdem ich WP Super Cache deaktiviert hatte, wurde die Website auch in Firefox und IE wieder richtig dargestellt!

Eine super Sache.

Ich aktivierte WP Super Cache daraufhin wieder und aktivierte „Caching An (Empfohlen)“ wieder. Das ist wichtig, ansonsten wird trotz aktiven Plugins nichts gecached. Die Website wurde noch immer richtig dargestellt. Ich wurde nun mutiger und aktivierte auch die Funktion „Komprimiere Seiten, so das sie schneller an Besucher ausgeliefert werden. (Empfohlen)“ wieder.

Es wurde noch immer alles richtig in Firefox und Edge dargestellt (und in Chrome sowieso)!

Ich hoffe, dieser Tipp hilft dir. Lass mir gerne einen Kommentar da, wenn es funktioniert hat oder du auf etwas anderes Wichtiges in dem Zusammenhang gestoßen bist.