Felix Riesterer: Safari scrollt nicht

problematische Seite

Liebe Mitlesenden,

auf der fraglichen Seite kann man das Dialogfeld im Safari-Browser nicht scrollen, welches sich auf Klick eines Buttons öffnet. Die angezeigte Seite selbst kann man ebenfalls im Safari-Browser nicht scrollen. In den Chromia und dem FF klappt dagegen alles wie erwartet.

Da ich selbst keine Apple-Hardware besitze, weiß ich nicht, wie ich das vernünftig debuggen soll und wie ich das Scrolling für Safari überhaupt reparieren kann. Hat da jemand Erfahrung und weiß Rat?

Liebe Grüße

Felix Riesterer

akzeptierte Antworten

  1. problematische Seite

    Hi,

    auf der fraglichen Seite kann man das Dialogfeld im Safari-Browser nicht scrollen, welches sich auf Klick eines Buttons öffnet. Die angezeigte Seite selbst kann man ebenfalls im Safari-Browser nicht scrollen. In den Chromia und dem FF klappt dagegen alles wie erwartet.

    Kann man's nicht scrollen, oder ist der Scrollbar nur ausgeblendet?

    Bei mir war im Dialog auch nix mit scrollen im Firefox. Das könnte aber daran gelegen haben, daß das Dialogfeld vollständig auf den Bildschirm gepaßt hat 😉

    cu,
    Andreas a/k/a MudGuard

    1. problematische Seite

      Lieber MudGuard,

      Kann man's nicht scrollen, oder ist der Scrollbar nur ausgeblendet?

      sowohl als auch. Das Dialog-Element kann man wohl mit einem Bedientrick am Mac scrollen, wenn man die Eingabefenster der Reihe nach durchwechselt. Das ist wohl so ähnlich wie am PC mit der Tab-Taste. Aber da ich keinen Mac habe, kann ich's nicht genauer beschreiben.

      Bei mir war im Dialog auch nix mit scrollen im Firefox. Das könnte aber daran gelegen haben, daß das Dialogfeld vollständig auf den Bildschirm gepaßt hat 😉

      Wenn Du die beiden Buttons am unteren Ende gesehen hast, dann hat es in der Tat komplett auf Deinen Bildschirm gepasst.

      Liebe Grüße

      Felix Riesterer

  2. problematische Seite

    Hallo Felix,

    die Höhenangabe für section (height: calc(100vh - 2.5em)) verursacht wohl das Problem. Ich weiß nicht warum, aber lässt man es weg, scrollt die Seite.

    Ein Scrollen in den Unterfomularen habe ich nicht beobachtet, im FF und im Chrióme unter MacOS scrollt immer die ganze Seite.

    Gruß
    Jürgen

    1. problematische Seite

      Lieber JürgenB,

      die Höhenangabe für section (height: calc(100vh - 2.5em)) verursacht wohl das Problem. Ich weiß nicht warum, aber lässt man es weg, scrollt die Seite.

      das werde ich einmal ausprobieren. Habe jetzt ein iPad zur Verfügung, womit ich zumindest sehen kann, ob meine Änderungen etwas bewirken. Vielen Dank für die Anregung.

      Liebe Grüße

      Felix Riesterer

    2. problematische Seite

      Lieber JürgenB,

      die Höhenangabe für section (height: calc(100vh - 2.5em)) verursacht wohl das Problem. Ich weiß nicht warum, aber lässt man es weg, scrollt die Seite.

      damit erreiche ich nur, dass die section scrollen kann. Das Dialogfeld bleibt unverändert nicht-scrollbar. Das ändert sich leider auch nicht, wenn ich dem dialog-Element die Höhenangabe wegnehme.

      Weiß noch jemand Rat?

      Liebe Grüße

      Felix Riesterer

      1. problematische Seite

        Hi there,

        die Höhenangabe für section (height: calc(100vh - 2.5em)) verursacht wohl das Problem. Ich weiß nicht warum, aber lässt man es weg, scrollt die Seite.

        damit erreiche ich nur, dass die section scrollen kann. Das Dialogfeld bleibt unverändert nicht-scrollbar. Das ändert sich leider auch nicht, wenn ich dem dialog-Element die Höhenangabe wegnehme.

        Weiß noch jemand Rat?

        Vielleicht hab ich Dein Ansinnen ja auch mißverstanden, aber ich nehme an, Du willst die <article>-Elemente scrollbar machen? (Wobei, ich hab mir das wie gesagt mit einem älteren Seamonkey angesehen, der zeigt ohnehin etwas anderes an als ein neuer Chromium auf einem Linuxrechner)...

        1. problematische Seite

          Lieber klawischnigg,

          Vielleicht hab ich Dein Ansinnen ja auch mißverstanden, aber ich nehme an, Du willst die <article>-Elemente scrollbar machen?

          nein, die article-Elemente sollen innerhalb des main-Elements regulär im normalen Elementfluss scrollbar sein. Damit man keinen Scrollbalken sieht, hatte ich dem main-Element eine feste Höhe gegeben (calc(100vh - 2.5em)). Das scheint im Safari bereits ein Problem gewesen zu sein.

          Das darüber gelegte dialog-Element (muss man einen Button für klicken) soll nun wie ein Modal-Dialog sich über die Displayfläche legen und seinerseits scrollbar sein. Dabei soll es aber in den Viewport eingepasst sein.

          Um das zu erreichen, hatte ich ihm die gleiche Höhenbeschränkung gegeben, wie ursprünglich dem main-Element. Nun ist zwar der Inhalt des main-Elements scrollbar, jedoch nicht der Inhalt des dialog-Elements. Will man mit Wischen diesen scrollen, scrollt stattdessen der Inhalt im Hintergrund...

          Liebe Grüße

          Felix Riesterer

          1. problematische Seite

            Hi there,

            Das darüber gelegte dialog-Element (muss man einen Button für klicken) soll nun wie ein Modal-Dialog sich über die Displayfläche legen und seinerseits scrollbar sein. Dabei soll es aber in den Viewport eingepasst sein.

            Um das zu erreichen, hatte ich ihm die gleiche Höhenbeschränkung gegeben, wie ursprünglich dem main-Element. Nun ist zwar der Inhalt des main-Elements scrollbar, jedoch nicht der Inhalt des dialog-Elements. Will man mit Wischen diesen scrollen, scrollt stattdessen der Inhalt im Hintergrund...

            Ich sehe (in einem aktuellen Browser😉 (chromium, Linux Mint)), was Du meinst. Aber soweit ich das sehe, ist der einzige Unterschied, daß der Scrollbar von der Section auf den Seiten-Body wandert. Die Funktionalität scheint mir damit ja in jedem Fall gegeben. Wenn Du das für den Safari wirklich unbedingt abfangen willst, dann würd' ich die Höhenangabe für die meisten Browser drinnen lassen und für den Apple-Browser die height-Anweisung einfach mit einem kleinen Javascript am Seitenende entfernen. Apple-Anwender sind Kummer eh gewöhnt, und Javascript drehen die unter Garantie nicht ab...;)

            Edit: oder, umgekehrt, weglassen und einfach für alle anderen Browser hinzufügen - damit ist für jeden Anwender die Funktionalität gegeben...

            1. problematische Seite

              Lieber klawischnigg,

              Ich sehe (in einem aktuellen Browser😉 (chromium, Linux Mint)), was Du meinst.

              lieb gemeint, aber ich benötige einen Hinweis, wie ich die Inhalte des dialog-Elements scrollbar bekomme. Das tun sie im Safari nämlich nicht (getestet mit einem iPad).

              Liebe Grüße

              Felix Riesterer

              1. problematische Seite

                Hi there,

                Ich sehe (in einem aktuellen Browser😉 (chromium, Linux Mint)), was Du meinst.

                lieb gemeint,

                😉 - naja, heute ist ja die Nacht der Amateure, da bemühe ich mich immer, milde gestimmt zu sein...😉

                aber ich benötige einen Hinweis, wie ich die Inhalte des dialog-Elements scrollbar bekomme. Das tun sie im Safari nämlich nicht (getestet mit einem iPad).

                Was genau findest Du an der Lösung schlecht, daß Safari-Nutzer halt die ganze Seite scrollen müssen und nur die Nutzer anderer Browser das "richtige" Verhalten sehen?

                1. problematische Seite

                  Lieber klawischnigg,

                  Was genau findest Du an der Lösung schlecht, daß Safari-Nutzer halt die ganze Seite scrollen müssen und nur die Nutzer anderer Browser das "richtige" Verhalten sehen?

                  daran finde ich nichts schlechtes, es ist nur auf der fraglichen Seite leider noch nicht möglich. Um es möglich zu machen, fehlt mir der entscheidende Hinweis.

                  Liebe Grüße

                  Felix Riesterer

                  1. problematische Seite

                    Hi there,

                    Was genau findest Du an der Lösung schlecht, daß Safari-Nutzer halt die ganze Seite scrollen müssen und nur die Nutzer anderer Browser das "richtige" Verhalten sehen?

                    daran finde ich nichts schlechtes, es ist nur auf der fraglichen Seite leider noch nicht möglich. Um es möglich zu machen, fehlt mir der entscheidende Hinweis.

                    ok, aneinander vorbeigeredet...😉 (dabei hab ich echt noch keiner einzigen Flasche etwas angetan😉)

                    Wo ist denn der Button, der den "Dialog" öffnet? Im Seamonkey sieht die Seite bei mir so aus:

                    im Chromium sieht's so aus:

                    vielleicht liegt ja da der (ein) Hund begraben...?

                    1. problematische Seite

                      Lieber klawischnigg,

                      Wo ist denn der Button, der den "Dialog" öffnet?

                      der Button hat die Beschriftung „Änderungen mitteilen“.

                      Liebe Grüße

                      Felix Riesterer

                      1. problematische Seite

                        Hi there,

                        Wo ist denn der Button, der den "Dialog" öffnet?

                        der Button hat die Beschriftung „Änderungen mitteilen“.

                        Ok, verstehe. Da hat's soweit ich sehen kann ein Problem mit dem z-index. Zumindest auf dem Seamonkey gehts, wenn ich den z-index erhöhe. Möglicherweise ist das ja auf dem Safari die gleiche Ursache...?

                        1. problematische Seite

                          Lieber klawischnigg,

                          Da hat's soweit ich sehen kann ein Problem mit dem z-index. Zumindest auf dem Seamonkey gehts, wenn ich den z-index erhöhe.

                          den habe ich von 1 auf 2 erhöht und kann jetzt auf dem iPad tatsächlich scrollen!

                          Man, man, man, also echt, dieser Safari!

                          Dir ganz herzlichen Dank, klawischnigg! Das war der zielführende Hinweis!

                          Liebe Grüße und jetzt aber echt mal guten Rutsch!

                          Felix Riesterer

  3. problematische Seite

    Hi there,

    auf der fraglichen Seite kann man das Dialogfeld im Safari-Browser nicht scrollen, welches sich auf Klick eines Buttons öffnet. Die angezeigte Seite selbst kann man ebenfalls im Safari-Browser nicht scrollen. In den Chromia und dem FF klappt dagegen alles wie erwartet.

    Der Safari versteht Deine CSS-Angabe "height: calc(100vh - 2.5em)" nicht. (Etwas ältere Gecko-Browser im übrigen auch nicht)