Wenn Dir jemand erzählt, seine Software laufe «in jedem Browser gleich», dann hat er sie wahrscheinlich nur in Chrome getestet. Wir wissen das, weil wir es bei uns selbst gefunden haben — auf unserer eigenen Webseite, nach einem Update, das wir gross für sauber hielten.
Die Sache: Auf Safari sah die Seite gut aus. In Chrome auch. In Edge meldete der erste Test, das Layout sei «kaputt». Browser-Cache, dachten wir. War es nicht. Dann machten wir den Cross-Browser-Test, den wir schon viel früher hätten machen sollen.
Drei Engines, drei Welten
Im Web gibt es heute genau drei Rendering-Engines. Das wird oft übersehen, weil es so viele Browser gibt:
- Chromium — die Engine hinter Chrome, Edge, Brave, Vivaldi und Opera. Marktanteil über 70 Prozent. Wer hier testet, deckt fünf Browser auf einmal ab.
- WebKit — die Engine hinter Safari (und auf iOS hinter jedem Browser, denn Apple erlaubt nichts anderes). Macht ungefähr 18 Prozent aus.
- Gecko — die Engine von Firefox, und damit auch von LibreWolf, Mullvad Browser und Tor Browser. Marktanteil unter 5 Prozent — aber für Sicherheits-bewusste Nutzer faktisch die einzige Wahl.
Wer für Chrome entwickelt und nicht für die anderen testet, baut faktisch eine Webseite, die für Tor Browser nicht existiert. Das ist die Zielgruppe, der Datenschutz wirklich wichtig ist. Genau die Leute also, die zu UCC Pro passen.
Was bei uns kaputt war
Im Header der Webseite hatten wir eine Navigationsleiste mit Logo, sechs Menüpunkten, einer Suche und einem Kontakt-Button. Auf 1440 Pixel Bildschirmbreite passt das in Chromium und WebKit problemlos in eine Zeile.
Auf Firefox nicht. Der Menüpunkt «Kontakt» rutschte in eine zweite Zeile, die Suche schwebte daneben, das ganze Layout sah aus, als würde es gerade umziehen. Der Grund liegt im Detail: Firefox setzt die Standardwerte für flex-shrink bei flexiblen Elementen anders als Chromium. Wenn Du das nicht explizit erzwingst, dann ist die Frage, ob Dein Layout in eine Zeile passt, in jedem Browser eine andere.
Der Fix war drei Zeilen CSS:
.elementor-location-header > .elementor-element { flex-wrap: nowrap !important; }
.elementor-widget-nav-menu { flex-shrink: 1; min-width: 0; }
.elementor-nav-menu li > a { white-space: nowrap; padding: 0 14px; }
Aber den Bug hätten wir niemals entdeckt, wenn wir nicht alle drei Engines im Test gehabt hätten.
Wie Du es selbst machst
Wenn Du selbst eine Webseite betreust, brauchst Du keine teure Test-Plattform. Playwright reicht: ein Open-Source-Test-Framework, das alle drei Engines auf einer einzigen Maschine startet. Ein node-Skript mit fünfzig Zeilen Code schiesst Screenshots in Chromium, Firefox und WebKit, und Du legst sie nebeneinander.
Tor Browser, LibreWolf, Mullvad — alles Forks von Firefox ESR. Wer Firefox testet, testet sie alle. Brave, Edge, Vivaldi sind Chromium. Safari ist WebKit. Drei Engines, drei Tests, alle Browser abgedeckt. Es gibt keine Ausrede.
Wir haben den Test inzwischen in unsere Routine eingebaut. Nach jedem grösseren Update läuft er — und wir machen ihn nicht, weil ein Audit ihn verlangt, sondern weil wir nicht wollen, dass die Webseite eines IT-Sicherheits-Anbieters in einem Tor Browser kaputt ist. Das wäre dann doch zu peinlich.