Felix Riesterer: Darstellung unter Safari iOS - wer kann helfen?

problematische Seite

Liebe Mitlesende,

ich besitze keine Apple-Hardware. Unter allen für mich erreichbaren (aktuellen) Browsern wird die von mir betreute Schulwebsite korrekt angezeigt, nur auf dem iPad der Kollegin gibt es einen Schönheitsfehler in der Darstellung (mehrfach angezeigtes Hintergrundbild). Um diesen zu debuggen habe ich mittlerweile herausgefunden, bräuchte ich eine Kombination aus iPad, Mac (oder MacBook) und passendem Verbindungskabel, damit man auf dem Mac/MacBook remote die Anzeigefehler im Browser des iPads debuggen kann.

Anscheinend gibt es Unterschiede in der Darstellung eines Safari unter MacOS im Vergleich zu iOS, sodass man nicht einfach darauf vertrauen darf, dass die Anzeige unter MacOS repräsentativ für iPhone und iPad ist.

Wer kann mir helfen und die Ursache für den Schönheitsfehler nennen? Selbstverständlich können wir uns vorher über eine monetäre Vergütung unterhalten.

Liebe Grüße,

Felix Riesterer.

  1. problematische Seite

    ich besitze keine Apple-Hardware. Unter allen für mich erreichbaren (aktuellen) Browsern wird die von mir betreute Schulwebsite korrekt angezeigt, nur auf dem iPad der Kollegin gibt es einen Schönheitsfehler in der Darstellung (mehrfach angezeigtes Hintergrundbild). Um diesen zu debuggen habe ich mittlerweile herausgefunden, bräuchte ich eine Kombination aus iPad, Mac (oder MacBook) und passendem Verbindungskabel, damit man auf dem Mac/MacBook remote die Anzeigefehler im Browser des iPads debuggen kann.

    Wo ist dann da das fragliche Hintergrundbild genau? Direkt auf der Startseite sehe ich keins.

    1. problematische Seite

      Lieber Mitleser,

      Wo ist dann da das fragliche Hintergrundbild genau? Direkt auf der Startseite sehe ich keins.

      html > body > header > a

      Liebe Grüße,

      Felix Riesterer.

  2. problematische Seite

    @@Felix Riesterer

    Selbstverständlich können wir uns vorher über eine monetäre Vergütung unterhalten.

    So groß, dass es zur Anschaffung der fehlenden Hardware reicht, wird sie nicht sein? 😉

    Ist ein Wandertag zu einem Open Device Lab für euch eine Option? Stuttgart, Augsburg?

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. problematische Seite

      Lieber Gunnar,

      Selbstverständlich können wir uns vorher über eine monetäre Vergütung unterhalten.

      So groß, dass es zur Anschaffung der fehlenden Hardware reicht, wird sie nicht sein? 😉

      das wäre es mir nicht wert. Aber wenn mir nur gegen Entgelt geholfen werden sollte, hätte ich eine (aus meiner Sicht) angemessene Anerkennung inkauf genommen. Aber @x51398 war ja schon so nett, mir den entscheidenden Tipp zu geben.

      Ist ein Wandertag zu einem Open Device Lab für euch eine Option? Stuttgart, Augsburg?

      Meine Güte, was es nicht alles gibt! Das muss ich mir tatsächlich etwas genauer anschauen. Das wäre sicher etwas für den Informatik-Unterricht! Herzlichen Dank für den heißen Tipp!

      Liebe Grüße,

      Felix Riesterer.

  3. problematische Seite

    Lieber Felix,

    das seltsame Verhalten liegt daran, dass das iPad die Telefon- und Faxnummer automatisch verlinkt, also weitere "<a>"-Elemente im Header einfügt. Was zu tun ist, weißt Du nun sicher;-)

    Viele Grüße Basti

    1. problematische Seite

      Lieber x51398,

      das seltsame Verhalten liegt daran, dass das iPad die Telefon- und Faxnummer automatisch verlinkt, also weitere "<a>"-Elemente im Header einfügt.

      auf sowas muss man erst einmal kommen. Die Nummern als anklickbare Links gibt es im Footer der Seite noch einmal (Fax nicht, Fon schon).

      Was zu tun ist, weißt Du nun sicher;-)

      Oh yeah! Dir einen ganz herzlichen Dank! Das werde ich ausgiebig testen und wieder berichten. Einen ersten Versuch mit a:first-of-type habe ich schon implementiert. Reicht das schon auf Deiner Hardware?

      Liebe Grüße,

      Felix Riesterer.

      1. problematische Seite

        Hallo Felix,

        Reicht das schon auf Deiner Hardware?

        also ehrlich gesagt sieht es für mich sowohl auf dem Telefon als auch auf dem iPad total kaputt aus.

        iPad:

        Screenshot iPad Air Hochformat

        Screenshot iPad Air Querformat

        iPhone:

        Screenshot iPhone Hochformat

        Screenshot iPhone Querformat

        LG,
        CK

        1. problematische Seite

          Lieber Christian,

          also ehrlich gesagt sieht es für mich sowohl auf dem Telefon als auch auf dem iPad total kaputt aus.

          komisch - offensichtlich nur auf diesen Devices. Auf 'nem Mac scheint alles OK?

          iPad:

          Jetzt, da ich das ominöse Meta-Element mit <meta name="format-detection" content="telephone=no"> implementiert habe, sollte das nun etwas vernünftiger aussehen.

          Oder tut es das noch immer nicht?

          iPhone:

          Irgendwie stimmt da anscheinend der Bezugspunkt für absolute Positionierung nicht. Der Menü-Button rutscht zu weit nach links. In anderen Browsern scheint das besser zu klappen. Webkit scheint mir hier "kaputt" zu sein, denn der Epiphany-Browser mit Webkit-Engine fällt dabei auch aus der Rolle. Das bringt mich zu der Frage, inwiefern diese Engine noch von großer Bedeutung bleiben wird. Google hat sich mit Blink davon ja auch längst gelöst...

          Dir jedenfalls auch ganz herzlichen Dank für Dein Feedback und Testen!

          Liebe Grüße,

          Felix Riesterer.

          1. problematische Seite

            Liebe Ingrid,

            Irgendwie stimmt da anscheinend der Bezugspunkt für absolute Positionierung nicht.

            das ist nicht der Grund. Ich versuche im Prinzip CSS Image Replacement auf einem Button. In Epiphany konnte ich herausfinden, dass ein Button, bei dem man die Beschriftung visuell verstecken möchte, nicht wie bei anderen Browsern mittels width: 0; overflow: hidden; auf sein per Padding in den sichtbaren Bereich gerücktes Hintergrundbild reduzieren kann, da Safari zwar den zu verbergenden Textanteil brav verbirgt, den dazu benötigten Platz aber für das Element reserviert, weshalb mein Menü-Button mit großen seitlichen Abständen platziert wird, was die restlichen Listenpunkte so weit nach rechts verdrängt, dass diese umbrechen müssen.

            Dagegen scheint mir momentan kein Kraut gewachsen zu sein - es sei denn, ich könnte über irgendeine Art Browser-Sniffing das visuelle Verstecken meiner Button-Beschriftung für Webkits anders lösen. Aber negative Margins via Vendor-Prefixes? Das habe ich in Epiphany erfolglos ausprobiert. Und in allen anderen Browsern führt es zu unerwünschter Darstellung. Auch auf sitepoint.com habe ich nicht die Lösung gefunden.

            Liebe Grüße,

            Felix Riesterer.

            1. problematische Seite

              Ingrid, ich bin's nochmal.

              dass ein Button, bei dem man die Beschriftung visuell verstecken möchte, nicht wie bei anderen Browsern mittels width: 0; overflow: hidden; auf sein per Padding in den sichtbaren Bereich gerücktes Hintergrundbild reduzieren kann, da Safari zwar den zu verbergenden Textanteil brav verbirgt, den dazu benötigten Platz aber für das Element reserviert

              das tut er bei einer Breite von exakt null, aber mit width: 0.1em ist sie größer null und das Verhalten sehr nahe bei der gewünschten Darstellung - und es tut den anderen Browsern nicht weh.

              Ist jetzt alles wie es soll?

              Liebe Grüße,

              Felix Riesterer.

              1. problematische Seite

                Hallo Felix,

                jetzt musste ich doch nochmal meine Arbeitskiste raussuchen, trotz Urlaub 😉

                Ist jetzt alles wie es soll?

                iPad Air: Querformat sieht gut aus. Hochformat sieht immer noch kaputt aus:

                Screenshot iPad Air Hochformat

                iPhone: Hochformat unverändert, das Hamburger-Menü ist mitten in der Überschrift. Querformat deutlich besser, aber die Navigations-Liste (Unsere Schule, …) bricht immer noch sehr ungünstig um:

                Screenshot iPhone Querformat

                Auf 'nem Mac scheint alles OK?

                Ja, sieht gut aus.

                Webkit scheint mir hier "kaputt" zu sein, denn der Epiphany-Browser mit Webkit-Engine fällt dabei auch aus der Rolle. Das bringt mich zu der Frage, inwiefern diese Engine noch von großer Bedeutung bleiben wird. Google hat sich mit Blink davon ja auch längst gelöst...

                Ich habe mit Safari auch schon oft Probleme gehabt, ja. Das ist ein unterirdischer Browser. Aber leider ist Apple der größte Smartphone-Hersteller der Welt, die Relevanz steht also erstmal ausser Frage.

                LG,
                CK

                1. problematische Seite

                  Lieber Christian,

                  jetzt musste ich doch nochmal meine Arbeitskiste raussuchen, trotz Urlaub 😉

                  hehe. Was soll ich da sagen, der ich eigentlich Schulferien habe? Aber ganz lieben Dank für Deine Hilfe!

                  iPad Air: Querformat sieht gut aus.

                  OK.

                  Hochformat sieht immer noch kaputt aus:

                  Screenshot iPad Air Hochformat

                  Mir scheint, dass er das neue HTML lädt, was die Konvertierung der Telefonnummern nun verhindert, aber anscheinend benutzt er noch immer das alte CSS, denn in meinem Epiphany sieht es jetzt tatsächlich korrekt aus.

                  Habe jetzt intern eine Prüfung auf das Dateialter der CSS-Datei gemacht (wird bei Bedarf neu aus den Teildateien zusammengesetzt) und liefere das Dateialter als Query-String mit, damit immer die aktuelle CSS-Datei geladen wird.

                  Kannst Du sicher sagen, dass das korrigierte CSS geladen wird? Und sieht es dann immer noch kaputt aus?

                  iPhone: Hochformat unverändert, das Hamburger-Menü ist mitten in der Überschrift. Querformat deutlich besser, aber die Navigations-Liste (Unsere Schule, …) bricht immer noch sehr ungünstig um:

                  Screenshot iPhone Querformat

                  Das habe ich nun hoffentlich auch besser gelöst. Wenn die aktuelle CSS-Datei geladen wird.

                  Ich habe mit Safari auch schon oft Probleme gehabt, ja. Das ist ein unterirdischer Browser. Aber leider ist Apple der größte Smartphone-Hersteller der Welt, die Relevanz steht also erstmal ausser Frage.

                  seufz

                  Herzlichen Dank. Ich bin jetzt schon um einiges weiter in der Angelegenheit.

                  Liebe Grüße,

                  Felix Riesterer.

                  1. problematische Seite

                    Hallo Felix,

                    jetzt musste ich doch nochmal meine Arbeitskiste raussuchen, trotz Urlaub 😉

                    hehe. Was soll ich da sagen, der ich eigentlich Schulferien habe?

                    Ich dachte, Lehrer haben nur „unterrichtsfreie Zeit?“ 😉

                    Aber ganz lieben Dank für Deine Hilfe!

                    Gerne 😀

                    Kannst Du sicher sagen, dass das korrigierte CSS geladen wird? Und sieht es dann immer noch kaputt aus?

                    Jetzt sieht es gut aus 👍

                    Das habe ich nun hoffentlich auch besser gelöst. Wenn die aktuelle CSS-Datei geladen wird.

                    Ja, sieht jetzt auch gut aus 👍

                    LG,
                    CK

                    1. problematische Seite

                      Hallo Christian Kruse,

                      Ich dachte, Lehrer haben nur „unterrichtsfreie Zeit?“ 😉

                      Oder Urlaub. 😂

                      Bis demnächst
                      Matthias

                      --
                      Rosen sind rot.
                    2. problematische Seite

                      Lieber Christian,

                      Ich dachte, Lehrer haben nur „unterrichtsfreie Zeit?“ 😉

                      das Kultusministerium Baden-Württemberg spricht wörtlich von "Ferien". Wie sollte ich das nun nennen?

                      Jetzt sieht es gut aus 👍

                      Jetzt bin ich tatsächlich sehr erleichtert. Ganz herzlichen Dank nochmal!

                      Liebe Grüße,

                      Felix Riesterer.

                      1. problematische Seite

                        Hallo Felix,

                        Ich dachte, Lehrer haben nur „unterrichtsfreie Zeit?“ 😉

                        das Kultusministerium Baden-Württemberg spricht wörtlich von "Ferien". Wie sollte ich das nun nennen?

                        Ich mach doch nur Witzchen 😉

                        LG,
                        CK

      2. problematische Seite

        Hallo Felix Riesterer,

        Einen ersten Versuch mit a:first-of-type habe ich schon implementiert. Reicht das schon auf Deiner Hardware?

        Ich würde ja eher die automatische Verlinkung ausschalten und nur die Telefonnummern verlinken, die ich auch verlinkt haben möchte.

        https://developer.apple.com/library/content/featuredarticles/iPhoneURLScheme_Reference/PhoneLinks/PhoneLinks.html#//apple_ref/doc/uid/TP40007899-CH6-SW1

        Bis demnächst
        Matthias

        --
        Rosen sind rot.
        1. problematische Seite

          Lieber Matthias,

          https://developer.apple.com/library/content/featuredarticles/iPhoneURLScheme_Reference/PhoneLinks/PhoneLinks.html#//apple_ref/doc/uid/TP40007899-CH6-SW1

          was man bei Apple alles für'n S..... machen muss, damit deren Kram das tut, was andere ohne Extras ohnehin schon tun. Aber man liest im Internet ja, Safari sei der neue Internet-Explorer.

          Liebe Grüße,

          Felix Riesterer.

          1. problematische Seite

            Hallo Felix,

            Aber man liest im Internet ja, Safari sei der neue Internet-Explorer.

            Gerüchteweise ist der IE der neue Safari 😂

            LG,
            CK

        2. problematische Seite

          Lieber Matthias,

          https://developer.apple.com/library/content/featuredarticles/iPhoneURLScheme_Reference/PhoneLinks/PhoneLinks.html#//apple_ref/doc/uid/TP40007899-CH6-SW1

          dieser Link hat mir sehr viel weiter geholfen. Danke!

          Liebe Grüße,

          Felix Riesterer.

          1. problematische Seite

            Hallo Felix Riesterer,

            dieser Link hat mir sehr viel weiter geholfen. Danke!

            Gern. 😀

            Auch der edge neigt übrigens zu solcherart Eigenmächtigkeit.

            Bis demnächst
            Matthias

            --
            Rosen sind rot.
            1. problematische Seite

              Lieber Matthias,

              Auch der edge neigt übrigens zu solcherart Eigenmächtigkeit.

              da ich keinen Zugang zu Win10 habe, ist mir das noch nicht aufgefallen. Aber wenn dieses Meta-Element auch im Edge hilft, umso besser!

              Danke!

              Liebe Grüße,

              Felix Riesterer.

              1. problematische Seite

                Hallo Felix Riesterer,

                Aber wenn dieses Meta-Element auch im Edge hilft, umso besser!

                Das wäre Wunschdenken. Für den IE heißt es <html x-ms-format-detection="none">

                https://msdn.microsoft.com/en-us/library/dn337007(v=vs.85).aspx

                Bis demnächst
                Matthias

                --
                Rosen sind rot.
            2. problematische Seite

              @@Matthias Apsel

              Auch der edge neigt übrigens zu solcherart Eigenmächtigkeit.

              Was ja prinzipiell auch gut so ist.

              Es ist für Nutzer ärgerlich, eine Telefonnummer kopieren oder nochmals eintippen zu müssen anstatt das Gerät sie auf einen Click wählen zu lassen, weil der Entwickler vergessen hat, sie zu verlinken (oder gar nicht gewusst hat, dass es tel:-Links gibt).

              (Natürlich kann es bei der automatischen Erkennung auch zu false positives kommen. Wenn die Zweierpotenzen 32 16 8 4 2 1 aufgelistet werden, wählt jeder Rosis Nummer.)

              Das Ausschalten dieses durchaus nützlichen Features sollte nur mit Bedacht geschehen.

              LLAP 🖖

              --
              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
              1. problematische Seite

                Hallo Gunnar Bittersmann,

                Das Ausschalten dieses durchaus nützlichen Features sollte nur mit Bedacht geschehen.

                Der Entwickler, der weiß, wie man dieses Feature ausschaltet, weiß auch, dass es tel:-Links gibt.

                Bis demnächst
                Matthias

                --
                Rosen sind rot.
                1. problematische Seite

                  Hallo Matthias,

                  Das Ausschalten dieses durchaus nützlichen Features sollte nur mit Bedacht geschehen.

                  Der Entwickler, der weiß, wie man dieses Feature ausschaltet, weiß auch, dass es tel:-Links gibt.

                  Äh, das halte ich in Zeiten von StackOverflow für eine ziemlich gewagte These. Ein solcher Meta-Tag ist schnell kopiert, den Sinn zu verstehen erfordert mehr Energie.

                  LG,
                  CK

                  1. problematische Seite

                    Hallo Christian,

                    Äh, das halte ich in Zeiten von StackOverflow für eine ziemlich gewagte These. Ein solcher Meta-Tag ist schnell kopiert, den Sinn zu verstehen erfordert mehr Energie.

                    das sieht man ja auch bei Fragen hier im Forum: die kompliziertesten Skripte einbauen, und dann noch nicht mal das if kennen. 😟

                    Gruß
                    Jürgen

                2. problematische Seite

                  Hallo,

                  Der Entwickler, der weiß, wie man dieses Feature ausschaltet, weiß auch, dass es tel:-Links gibt.

                  Überschätz mir die Entwickler nicht! ;)

                  Gruß
                  Kalk

              2. problematische Seite

                Hallo,

                und wenn Felix den Hintergrund nicht an das ´<a>´ sondern an das umschließende <header> gehängt hätte, wäre das Problem auch gar nicht aufgetreten.

                Gruß
                Jürgen

  4. problematische Seite

    Guten Morgen Felix,

    auf einem Android Handy stimmt mit der Überschrift etwas nicht und ich finde der Text ist etwas schwer zu lesen, da dieser über dem Logo liegt.

    1. problematische Seite

      Lieber Bernd,

      danke für Deinen Hinweis. Das ist ein Kollateralschaden gewesen, den meine :first-of-type-Ergänzung für iOS-Safari ergeben hat. Mit Matthias' Hinweis zu dem viel geeigneteren meta-Element ist das nun nicht mehr nötig. Habe es also wieder zurück-geändert.

      Liebe Grüße,

      Felix Riesterer.

  5. problematische Seite

    Hallo Felix Riesterer,

    im edge lässt sich das Menü nicht schließen.

    Screenshot Hamburgermenu

    Bis demnächst
    Matthias

    --
    Rosen sind rot.