bugfix: Grid Kompatibilitätsprobleme DuckDuckGo

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
  1. problematische Seite

    Hallo bugfix,

    ich kenne DDG als Suchmaschine im Browser. Die App wird mit Sicherheit kein eigenständiger Browser sein, die könnten vom Funktionsumfang her niemals mit dem derzeitigen Quasistandard Chromium mithalten (oder meinetwegen auch Mozilla). Selbst Microsoft hat das Handtuch geworfen und schmeißt die Edge-Engine weg.

    Die DDG App wird also eine Hülle um den Standardbrowser des Geräts darstellen, und an der Stelle bekommst du Unterschiede. Welchen Browser verwendet DDG auf Smartphone und Tablet? Wenn das ein Android 4 Tablet mit irgendeinem alten Samsung Browser oder Android Webview ist, dann wäre das eine Erklärung.

    Da kann der Useragent-String Aufklärung verschaffen. Den findest Du (solltest Du finden) in den Logs deines Webservers.

    Wenn Du da nicht rankommst, kann man tricksen. Setze in deiner Seite zu Beginn des <body> mal diesen Einzeiler ein:

    <p>User agent ist <script>document.write(navigator.userAgent);</script></p>
    

    Dann hast Du am Start der Seite eine Zeile mit dem Useragent-String des tatsächlich genutzten Browsers.

    Jajaja, ich weiß, das ist nichts für den regulären Einsatz, document.write ist verpönt und zumindest Chrome moppert dann auch in der Konsole rum, aber für einen schnellen Test, welcher Useragent das ist, bietet sich das einfach an.

    Rolf

    --
    sumpsi - posui - obstruxi
    1. problematische Seite

      Moin Rolf,

      ich kenne DDG als Suchmaschine im Browser. Die App wird mit Sicherheit kein eigenständiger Browser sein, die könnten vom Funktionsumfang her niemals mit dem derzeitigen Quasistandard Chromium mithalten (oder meinetwegen auch Mozilla). Selbst Microsoft hat das Handtuch geworfen und schmeißt die Edge-Engine weg.

      Man findet nirgens einen Hinweis welche Browser Engine dahinter stecken soll, vermutlich klauen die wie alle bei Mozilla ;-)

      Die DDG App wird also eine Hülle um den Standardbrowser des Geräts darstellen, und an der Stelle bekommst du Unterschiede. Welchen Browser verwendet DDG auf Smartphone und Tablet? Wenn das ein Android 4 Tablet mit irgendeinem alten Samsung Browser oder Android Webview ist, dann wäre das eine Erklärung.

      Die DuckDuckGo App läuft auch auf gerooteten Handys / Tablets ohne Webkit oder anderem Browser als Standalone App aber der Tipp war super, folgender User Agent wird angezeigt:

      User agent ist Mozilla/5.0 (Linux; Android 10) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/80.0.3987.149 Mobile Safari/537.36 DuckDuckGo/5

      Jajaja, ich weiß, das ist nichts für den regulären Einsatz, document.write ist verpönt und zumindest Chrome moppert dann auch in der Konsole rum, aber für einen schnellen Test, welcher Useragent das ist, bietet sich das einfach an.

      Sowas ist mir permanent wurscht (zum testen) 😀

      Da Firefox mit der gleichen Engine läuft müsste der DuckDuckGo das doch eigentlich darstellen? Ich bin verwirrt...

      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
      1. problematische Seite

        Hallo bugfix,

        Da Firefox mit der gleichen Engine läuft

        Nee, der Fuchs läuft gerade nicht mit der Chromium Engine. Der ist das kleine Dorf in Aremorica 😉

        Aber es wird Chrome 80 angezeigt, dann sollte der auch dahinter stecken. Als Mozilla melden die sich alle, weil es mal eine Zeitlang Mode war, nach Schlüsselwörtern im useragent-String zu suchen statt Feature Detection zu betreiben, und der damalige Mozilla Browser das Maß der Dinge war, bevor Microsoft den Browserkrieg anzettelte.

        Mein Desktop-Chrome sagt:

        "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36"

        Mein Desktop-Fuchs sagt:

        "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:74.0) Gecko/20100101 Firefox/74.0"

        Fun Fact, der Fuchs hatte sich gerade upgedated:

        TypeError: document.querySelector(...) is null
                            firefox_whatsnew_74.eee64f8922ea.js:1:3818
        

        Und damit stehen wir am Anfang: Warum klappt's nicht? Tja. Derzeit keine Idee, was DDG da anstellt.

        Rolf

        --
        sumpsi - posui - obstruxi
        1. problematische Seite

          Hallo,

          der damalige Mozilla Browser das Maß der Dinge war, bevor Microsoft den Browserkrieg anzettelte.

          afair zettelte M$ den Browserkrieg gegen Netscape an, lange bevor es den Fuchs gab.

          Gruß
          Kalk

          1. problematische Seite

            Hallo Tabellenkalk,

            Mozilla (Mo-saic God-zilla) war der Codename unter dem Netscape Navigator entwickelt wurde. Daher nahm ich an, dass Mozilla im UA-String daher stammt. Der Fuchs ist sozusagen der Nachfolger.

            Rolf

            --
            sumpsi - posui - obstruxi
            1. problematische Seite

              @@Rolf B

              Mozilla (Mo-saic God-zilla) war der Codename unter dem Netscape Navigator entwickelt wurde. Daher nahm ich an, dass Mozilla im UA-String daher stammt. Der Fuchs ist sozusagen der Nachfolger.

              Die Geschichte der User-Agent-Strings

              LLAP 🖖

              --
              Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.
              1. problematische Seite

                Hallo Gunnar,

                🤣 - mindestens so gut wie die Geschichte vom Pferdearsch

                Rolf

                --
                sumpsi - posui - obstruxi
                1. problematische Seite

                  Hallo,

                  🤣 - mindestens so gut wie die Geschichte vom Pferdearsch

                  ... oder die Ursprünge von amazon, ebay und UPS und anderen.

                  Viel Spaß,
                   Martin

                  --
                  Ich stamme aus Ironien, einem Land am sarkastischen Ozean.