Matthias Apsel: Wikiseiten im Mac-Safari

problematische Seite

Hallo alle,

im Wiki gibt es bunte Icons, die neben der Überschrift erster Ordnung platziert sind. Mir wurde zugetragen, dass im Safari auf Mac-Rechnern diese Icons nicht am rechten Rand sind, sondern weiter links, wahrscheinlich um die Breite der span-Elemente verschoben.

Kann bitte mal jemand ein wenig Analyse betreiben?

Bis demnächst
Matthias

--
Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
  1. problematische Seite

    Hallo,

    mein Kollege hat einen MAC. Wenn du mir eine URL gibst mache ich dir davon einen Screenshot.

    Monika

    [Vollzitat entfent]

    1. problematische Seite

      Hallo Monika - Schlauklug ;-) ,

      mein Kollege hat einen MAC. Wenn du mir eine URL gibst mache ich dir davon einen Screenshot.

      Danke für deine Unterstützung. Eine URL steht im Feld „problematische Seite“, ein Screenshot nützt mir aber nichts, man müsste schon in die Entwickertools schauen, warum die Icons nicht da sind, wo sie sein sollen.

      Bis demnächst
      Matthias

      --
      Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
      1. problematische Seite

        Hallo Matthias,

        mein Kollege hat einen MAC. Wenn du mir eine URL gibst mache ich dir davon einen Screenshot.

        Danke für deine Unterstützung. Eine URL steht im Feld „problematische Seite“, ein Screenshot nützt mir aber nichts, man müsste schon in die Entwickertools schauen, warum die Icons nicht da sind, wo sie sein sollen.

        Weil das li zu groß ist.

        Safari: Screenshot vom Wiki im Safari

        Chrome: Screenshot vom Wiki im Chrome

        Aber ich hatte noch keine Zeit das genauer zu untersuchen.

        LG,
        CK

      2. problematische Seite

        Hallo Matthias,

        so, hat mir jetzt keine Ruhe gelassen. Ändere das hier:

        #dokuwiki__pagetools li > * {
          display:none;
        }
        
        #dokuwiki__pagetools:hover li > *, #dokuwiki__pagetools li :focus {
          display:inline;
        }
        

        Damit gehts. Das width:0; overflow:hidden; scheint nicht dazu zu führen, dass das Eltern-Element in sich zusammenfällt. Erst das ausblenden via display:none hat eine Änderung gebracht.

        Ich halte das für einen Rendering-Bug im Safari.

        Edit: das sind bestehende Selektoren, es sollte also nur bestehendes CSS angepasst werden müssen.

        LG,
        CK

        1. problematische Seite

          Hallo Christian Kruse,

          Ich halte das für einen Rendering-Bug im Safari.

          Ich auch

          Edit: das sind bestehende Selektoren, es sollte also nur bestehendes CSS angepasst werden müssen.

          Damit geht es aber in den anderen Browsern nicht mehr (bzw. sollte auch im Safari nicht gehen), weil damit die li > * nicht dargestellt werden und somit ihre Höhe ebenfalls Null wird. Damit kleben dann die 3 Icons ohne Abstand aufeinander.

          Bis demnächst
          Matthias

          --
          Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
          1. problematische Seite

            Hallo Matthias,

            Edit: das sind bestehende Selektoren, es sollte also nur bestehendes CSS angepasst werden müssen.

            Damit geht es aber in den anderen Browsern nicht mehr (bzw. sollte auch im Safari nicht gehen), weil damit die li > * nicht dargestellt werden und somit ihre Höhe ebenfalls Null wird. Damit kleben dann die 3 Icons ohne Abstand aufeinander.

            Untereinander. Auch im Chrome und Firefox. Ja. Muttu halt mit margin auf dem Pseudo-Element spielen. Wird zwar immer noch springen, aber es springt auch jetzt bereits nicht unerheblich.

            LG,
            CK

          2. problematische Seite

            Hallo Matthias,

            Damit geht es aber in den anderen Browsern nicht mehr (bzw. sollte auch im Safari nicht gehen), weil damit die li > * nicht dargestellt werden und somit ihre Höhe ebenfalls Null wird. Damit kleben dann die 3 Icons ohne Abstand aufeinander.

            Eine ekelige Lösung, die auf display:none verzichtet: position:absolute; right:0; für das Pseudo-Element und auf #dokuwiki__pagetools:hover ul negative margins, um das springen zu vermeiden. Die genauen Werte hab ich jetzt aber nicht überprüft.

            Edit: bzw right auf etwas anderes als 0 setzen ;-)

            LG,
            CK

            1. problematische Seite

              Hallo Christian Kruse,

              ich habe im Test-Wiki ein offenbar überflüssiges display: flex für die Pseudoelemente entfernt. Hat das im Safari Auswirkungen?

              Bis demnächst
              Matthias

              --
              Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
              1. problematische Seite

                Hallo Matthias,

                ich habe im Test-Wiki ein offenbar überflüssiges display: flex für die Pseudoelemente entfernt. Hat das im Safari Auswirkungen?

                Das hatte ich auch gesehen und im Inspector entfernt, das hat aber nichts geändert.

                LG,
                CK

                1. problematische Seite

                  Hallo Christian Kruse,

                  ich habe im Test-Wiki ein offenbar überflüssiges display: flex für die Pseudoelemente entfernt. Hat das im Safari Auswirkungen?

                  Das hatte ich auch gesehen und im Inspector entfernt, das hat aber nichts geändert.

                  Wenn ich das display: flex entferne, hüpfts bei mir ;-)

                  Bis demnächst
                  Matthias

                  --
                  Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
                  1. problematische Seite

                    Hallo Matthias,

                    ich habe im Test-Wiki ein offenbar überflüssiges display: flex für die Pseudoelemente entfernt. Hat das im Safari Auswirkungen?

                    Das hatte ich auch gesehen und im Inspector entfernt, das hat aber nichts geändert.

                    Wenn ich das display: flex entferne, hüpfts bei mir ;-)

                    Nene, schon im Original-Zustand. :-) Siehe auch.

                    LG,
                    CK

                    1. problematische Seite

                      Hallo Christian Kruse,

                      Nene, schon im Original-Zustand. :-) Siehe auch.

                      Bis demnächst
                      Matthias

                      --
                      Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
                      1. problematische Seite

                        Hallo Matthias,

                        Nene, schon im Original-Zustand. :-) Siehe auch.

                        Das ist schön, ändert aber nix daran, dass ich da nichts verändert habe ;-)

                        LG,
                        CK

              2. problematische Seite

                Hallo Matthias,

                ich verstehe noch nicht, warum, aber das span im button ist der Übeltäter:

                #button-top span {
                  display:none;
                }
                
                #dokuwiki__pagetools:hover #button-top span {
                  display:inline;
                }
                

                Edit: selbst mit width:0 !important; overflow:hidden; bleibt die computed width auf auto. Irgend ein default style vielleicht?

                Edit 2: nein, natürlich nicht, es ist nur ein inline-Element 😂 aber da kann man das etwas abändern:

                #button-top span {
                  display:inline-block;
                  width:0;
                }
                
                #dokuwiki__pagetools:hover #button-top span {
                  width:auto;
                }
                

                LG,
                CK

                1. problematische Seite

                  Hallo Christian Kruse,

                  ich verstehe noch nicht, warum, aber das span im button ist der Übeltäter:

                  Oh Mann ey ;-) Da bin ich auch grad dran.

                  Eigentlich können die auch ganz weg.

                  Bis demnächst
                  Matthias

                  --
                  Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
                  1. problematische Seite

                    Hallo,

                    Eigentlich können die auch ganz weg.

                    Vorsicht, vielleicht ists Kunst...

                    Gruß
                    Kalk

                2. problematische Seite

                  Hallo Christian Kruse,

                  ich verstehe noch nicht, warum, aber das span im button ist der Übeltäter:

                  ohne spans, schau mal bitte.

                  BTW: Bei mir springt übrigens nix. Im manchen Auflösungen mal einen halben Pixel nach rechts oder links.

                  Bis demnächst
                  Matthias

                  --
                  Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
                  1. problematische Seite

                    Hallo Matthias,

                    BTW: Bei mir springt übrigens nix. Im manchen Auflösungen mal einen halben Pixel nach rechts oder links.

                    also ein halber Quantensprung :)

                    Gruß
                    Jürgen

                  2. problematische Seite

                    Hallo Matthias,

                    ich verstehe noch nicht, warum, aber das span im button ist der Übeltäter:

                    ohne spans, schau mal bitte.

                    Bei mir ist da weiterhin ein span im button.

                    BTW: Bei mir springt übrigens nix. Im manchen Auflösungen mal einen halben Pixel nach rechts oder links.

                    Hier in allen drei Browsern (2560x1440).

                    LG,
                    CK

                    1. problematische Seite

                      Hallo Christian Kruse,

                      ohne spans, schau mal bitte.

                      Bei mir ist da weiterhin ein span im button.

                      ups. falsches Wiki: ohne spans

                      BTW: Bei mir springt übrigens nix. Im manchen Auflösungen mal einen halben Pixel nach rechts oder links.

                      Hier in allen drei Browsern (2560x1440).

                      Hm.

                      Bis demnächst
                      Matthias

                      --
                      Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
                      1. problematische Seite

                        Hallo Matthias,

                        ohne spans, schau mal bitte.

                        Bei mir ist da weiterhin ein span im button.

                        ups. falsches Wiki: ohne spans

                        Ohne HTTPS ;-)

                        Ich glaube, wir haben uns falsch verstanden. Es ist nicht das span per se, sondern der content vom button. Wenn du nur das span entfernst ändert sich nichts. Entweder, du nimmst den Button raus und machst daraus ein a (das button ist da eh nicht so sinnvoll) oder du lässt das span drin und machst das wie oben gezeigt.

                        LG,
                        CK

                        1. problematische Seite

                          Hallo Christian Kruse,

                          Ich glaube, wir haben uns falsch verstanden. Es ist nicht das span per se, sondern der content vom button. Wenn du nur das span entfernst ändert sich nichts. Entweder, du nimmst den Button raus und machst daraus ein a (das button ist da eh nicht so sinnvoll) oder du lässt das span drin und machst das wie oben gezeigt.

                          Der Button ist da reingewandert, um nach oben zu scrollen, ohne die History zu beeinflussen.

                          Bis demnächst
                          Matthias

                          --
                          Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
                        2. problematische Seite

                          Hallo Christian Kruse,

                          So, der button ist jetzt ein a (mit JS-Trickserei); die spans sind weg; das „überflüssige“ flex wieder drin. Außerdem habe ich den Pseudoelementen die Breite der Grafik gegeben, weil ich den Eindruck hatte, dass die Breite der Icons sich verändert (siehe mit flex.mp4)

                          Wie siehts jetzt aus?

                          Aber calc beherrscht der Safari schon - oder?

                          Bis demnächst
                          Matthias

                          --
                          Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
                          1. problematische Seite

                            Hallo Matthias,

                            Wie siehts jetzt aus?

                            Sieht gut aus.

                            Aber calc beherrscht der Safari schon - oder?

                            http://caniuse.com/#feat=calc ;-)

                            LG,
                            CK

                          2. problematische Seite

                            Hallo Matthias,

                            ist eigentlich dieser Flicker-Effekt Absicht?

                            LG,
                            CK

                            1. problematische Seite

                              Hallo Christian Kruse,

                              ist eigentlich dieser Flicker-Effekt Absicht?

                              Nö - und hab ich unter Windows auch nicht.

                              Bis demnächst
                              Matthias

                              --
                              Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
                              1. problematische Seite

                                Hallo Matthias,

                                ist eigentlich dieser Flicker-Effekt Absicht?

                                Nö - und hab ich unter Windows auch nicht.

                                Den Flicker-Effekt hab ich auch nur unter Safari. Das springen aber unter allen drei Browsern, und auch unter Linux mit Chrome/Firefox (gestern noch geprüft ;-).

                                LG,
                                CK

                                1. problematische Seite

                                  Hallo Christian Kruse,

                                  Das springen aber unter allen drei Browsern, und auch unter Linux mit Chrome/Firefox (gestern noch geprüft ;-).

                                  Bei mir hüpfst auch im FF unter Linux nicht.

                                  Bis demnächst
                                  Matthias

                                  --
                                  Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.