webentwicklung-frage-antwort-db.com.de

Warum ist meine Position: Sticky funktioniert nicht unter iOS?

Ich bin gerade dabei, eine klebrige Benachrichtigungsleiste am unteren Rand eines mobilen Bildschirms zu codieren. Ich möchte, dass die Leiste am unteren Rand des Benutzerbildschirms hängen bleibt, bis der Benutzer die Bildlaufposition erreicht hat, an der sich die Leiste tatsächlich im Code befindet (kurz vor der Fußzeile der Seite). Ich habe das Beispiel "Doktor" von dieser Seite so ziemlich kopiert: https://alligator.io/css/position-sticky/ Mein Problem ist: Auf meiner Seite funktioniert die Leiste einwandfrei, wenn = verwendet wird Android Geräte oder beim Simulieren eines Mobilgeräts durch Anpassen der Browserbreite auf meinem Desktop-Computer. Unter iOS ist die Leiste jedoch nicht klebrig, dh sie befindet sich nur an ihrer Position und bleibt nicht haften Dies gilt sowohl für Safari als auch für Google Chrome. Das Seltsame ist: Auf der zuvor erwähnten Seite alligator.io funktioniert es auf meinem iOS-Gerät einwandfrei.

Ich vermute, dass dies eine Art Webkit-Problem ist, das mit dem Code um die Leiste zu tun hat, aber ich kann es nicht isolieren. Ich habe versucht zu debuggen, indem ich meinen Code so weit wie möglich an das Beispiel von alligator.io angepasst habe, aber ich kann ihn nicht zum Laufen bringen. Ich habe auch versucht, nach einem Überlauf zu suchen: Auto in übergeordneten Elementen - ohne Erfolg. Ich habe mehrere Stunden lang versucht, dies zu beheben, bin krank und müde von dem Problem und könnte ein weiteres Paar Augen verwenden, um herauszufinden, was ich übersehen habe.

<a href="#" class="jobAlertToggle">
    <div id="jobalarm_mobile">
        <i class="fa fa-bell"></i>
        <span>Jobalarm aktivieren</span>
        <label class="switch">
            <input type="checkbox">
            <span class="slider round"></span>
        </label>
    </div>
</a>

#jobalarm_mobile {
    display: table;
    font-size: 18px;
    width: 100%;
    height: 40px;
    background: #ff8400;
    color: white;
    font-weight: 400;
    text-align: center;
    position: -webkit-sticky;
    position: sticky;
    bottom: -50px;
    align-self: flex-end;
}

Sie können die Live-Seite besuchen, an der ich arbeite (versteckt auf Anfrage des Kunden, bitte kontaktieren Sie mich privat). Starten Sie einfach eine (vorgeschlagene) Suche und die Leiste wird angezeigt (oder nicht, wenn Sie iOS verwenden ...). Vielen Dank im Voraus für Ihre Hilfe.

14
c42

Einige der Tipps in meine Antwort hier können hilfreich sein, insbesondere das Hinzufügen von display: block zu Ihrem Container kann den Trick tun.

1
Simon_Weaver

Verwenden Sie für ios position: -webkit-sticky und für andere Fälle position: sticky

Für mich hat nichts außer jQuery/Javascript auf diese Weise funktioniert: Geben Sie das Element an, für das Sie eine klebrige Position benötigen: absolut und links: 0, und berechnen Sie dann mit Javascript den Versatz des Fensters nach links und fügen Sie diesen Versatz zur linken Eigenschaft von hinzu dein Element:

#stickyElement {
        position: absolute;
        left: 0;
     }

  function scrolling(){
       $('.someElementScrollingLeft').on('scroll', function() {
           let offset = $(this).scrollLeft();
           /* For me it only didn't work on phones, so checking screen size */
           if($( window ).width() <= 768)
           {
              let stickyElement = $('#stickyElement');
              stickyElement.css("left", offset);
            } 
         });
   }
0
Armin