bugfix: Grid Kompatibilitätsprobleme DuckDuckGo

Beitrag lesen

problematische Seite

Moin zusammen,

meine Bilderwand funktionierte bisher mit folgendem CSS nach meinen Vorstellungen und schaut wie folgt aus:

@supports (display: grid) {
    .square-container { 
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
        grid-auto-rows: 1fr;  
        padding:3% 6%;    
    }
    .square-container::before {  
        content: '';  
        width: 100%;  
        height: 0;  
        padding-bottom: 100%;  
        grid-row: 1 / 1;  
        grid-column: 1 / 1;  
    }
    .square-container > *:first-child { 
        grid-row: 1 / 1;   
        grid-column: 1 / 1; 
    }
}

so weit so gut... allerdings gibt's einen Browser mit einem sehr ominösen Verhalten, leider hat dieser Browser mehr als 10MIO Downloads im PlayStore, ist also nicht gänzlich unerheblich.

Das ding nennt sich DuckDuckGo. Wenn ich die Seite im Smartphone aufrufe ist alles bestens, das Grid wird Dargestellt wie in anderen Browsern auch, wenn ich die Seite mit dem gleichen Browser, gleicher Version auf dem Tablet aufrufe ist die Seite leer, es wird weder ein Grid noch Platzhalter für die Bilder oder Links angezeigt. Andere Browser machen was ich erwarte auf jedem Endgerät, das mir zur Verfügung steht.

Wer mal in das gesamte CSS schauen möchte kann das hier.

Kann mir jemand erklären was ich da wieder verpfuscht habe?

Danke schon mal im Voraus & auf Wiederlesen!

der torsten

--
------- Shakespeare sagt: To be or not to be / Sartre sagt: To be is to do / Camus sagt: To do is to be / Sinatra singt: Do be do be do