it-swarm.com.de

position: fixed funktioniert nicht auf iPad und iPhone

Ich habe eine Weile mit der festen Positionierung im iPad zu kämpfen. Ich weiß iScroll und es scheint nicht immer zu funktionieren (auch nicht in ihrer Demo). Ich weiß auch, dass Sencha eine Lösung dafür hat, aber ich konnte nicht Ctrl + F der Quellcode für diesen Fix.

Ich hoffe, dass jemand die Lösung hat. Das Problem ist, dass fest positionierte Elemente nicht aktualisiert werden, wenn der Benutzer auf einer iOS-basierten mobilen Safari nach unten oder oben schwenkt.

128
Tower

Am Ende habe ich die neue jQuery Mobile v1.1 verwendet: http://jquerymobile.com/blog/2012/04/13/announcing-jquery-mobile-1-1-0/

Wir haben jetzt eine solide Neuschreibung, die wirklich feste Symbolleisten in der .__-Datei bietet. viele beliebte Plattformen und greifen sicher auf die statische Symbolleiste zurück Positionierung in anderen Browsern.

Das Coolste an diesem Ansatz ist, dass im Gegensatz zu JS-basierten Lösungen, die die unnatürliche Scroll-Physik in allen Bereichen auferlegen Bei Plattformen ist unser Scrollen 100% native, weil es ist. Das heisst das Scrollen fühlt sich überall an und funktioniert mit Berührung, Mausrad und Tastaturbenutzereingabe. Als Bonus ist unsere CSS-basierte Lösung super geringes Gewicht und wirkt sich nicht auf Kompatibilität oder Zugänglichkeit aus.

6
Tower

Viele mobile Browser unterstützen absichtlich position:fixed; nicht, da feste Elemente auf einem kleinen Bildschirm stören könnten.

Die Site von Quirksmode.org hat einen sehr guten Blogbeitrag, der das Problem erklärt: http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html

Auf dieser Seite finden Sie auch eine Kompatibilitätstabelle, die zeigt, welche mobilen Browser position:fixed;: http://www.quirksmode.org/m/css.html unterstützen.

(Beachten Sie jedoch, dass sich die Welt des mobilen Browsers sehr schnell bewegt, so dass Tabellen wie diese möglicherweise nicht lange auf dem neuesten Stand sind!)

Update: Es wird berichtet, dass sowohl iOS 5 als auch Android 4 die Position haben: Unterstützung jetzt behoben. 

Ich habe iOS 5 heute selbst in einem Apple Store getestet und kann bestätigen, dass es mit fester Position funktioniert. Es gibt jedoch Probleme beim Vergrößern und Schwenken um ein festes Element.

Ich fand diese Kompatibilitätstabelle weit aktueller und nützlicher als die des Quirksmodes: http://caniuse.com/#search=fixed

Es verfügt über aktuelle Informationen zu Android, Opera (Mini und Handy) und iOS.

65
Spudley

Die festgelegte Positionierung funktioniert auf iOS nicht wie auf Computern.

Stellen Sie sich vor, Sie haben ein Blatt Papier (die Webseite) unter einer Lupe (dem Ansichtsfenster). Wenn Sie die Lupe und Ihr Auge bewegen, sehen Sie einen anderen Teil der Seite. So funktioniert iOS.

Jetzt gibt es eine Folie aus durchsichtigem Kunststoff mit einem Wort darauf, diese Folie bleibt auf jeden Fall stationär (Position: feste Elemente). Wenn Sie also die Lupe bewegen, erscheint das fixierte Element , um sich zu bewegen.

Statt die Lupe zu bewegen, verschieben Sie stattdessen das Papier (die Webseite), wobei die Plastikfolie und die Lupe ruhig bleiben. In diesem Fall scheint das Wort auf dem Plastikblatt fixiert zu bleiben und der Rest des Inhalts scheint sich zu bewegen (weil es tatsächlich ist). Dies ist ein herkömmlicher Desktop-Browser.

In iOS bewegt sich der Darstellungsbereich, in einem herkömmlichen Browser wird die Webseite verschoben. In beiden Fällen bleiben die festen Elemente in der Realität; auf iOS scheinen sich jedoch die festen Elemente zu bewegen.


Um dies zu umgehen, folgen Sie den letzten Absätzen in diesem Artikel

(Deaktivieren Sie das Scrollen grundsätzlich. Deaktivieren Sie den Inhalt in einem separaten scrollbaren Div (siehe das blaue Kästchen oben im verknüpften Artikel) und das fixierte Element absolut positioniert.)


"position: fixed" funktioniert jetzt wie erwartet in iOS5.

37
Jonathan.

position: behoben funktioniert auf Android/iPhone für vertikales Scrollen. Sie müssen jedoch sicherstellen, dass Ihre Meta-Tags vollständig festgelegt sind. z.B

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

Wenn Sie vorhaben, dieselbe Seite für Android vor 4.0 zu verwenden, müssen Sie auch die oberste Position festlegen. Andernfalls wird aus irgendeinem Grund ein kleiner Rand hinzugefügt.

22
Jason D.

jetzt unterstützt Apple das

overflow:hidden;
-webkit-overflow-scrolling:touch;
17
Uğur Özpınar

Feste Fußzeile (hier mit jQuery):

if (navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod' || navigator.platform == 'Linux armv6l') 
{
    window.ontouchstart = function () 
    {
        $("#fixedDiv").css("display", "none");
    }

    window.onscroll = function() 
    { 
        var iPadPosition = window.innerHeight + window.pageYOffset-45; // 45 is the height of the Footer
         $("#fixedDiv").css("position", "absolute");
         $("#fixedDiv").css("top", iPadPosition);
         $("#fixedDiv").css("display", "block");
    }
}

// in the CSS file should stand:
#fixedDiv {position: fixed; bottom: 0; height: 45px;  whatever else}

Ich hoffe es hilft.

14
Martin

Ich hatte dieses Problem auf Safari (iOS 10.3.3) - der Browser wurde erst nach dem Auslösen des Touchend-Ereignisses neu gezeichnet. Fixe Elemente wurden nicht angezeigt oder wurden abgeschnitten.

Der Trick für mich war das Hinzufügen von transform: translate3d (0,0,0); zu meinem festen Positionselement.

.fixed-position-on-mobile {
  position: fixed;
  transform: translate3d(0,0,0);
}

EDIT - Ich weiß jetzt, warum die Transformation das Problem behebt: Hardware-Beschleunigung. Durch das Hinzufügen der 3D-Transformation wird die GPU-Beschleunigung ausgelöst, um einen reibungslosen Übergang zu gewährleisten. Weitere Informationen zur Hardwarebeschleunigung finden Sie in diesem Artikel: http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

9
kenecaswell

Vermeiden Sie auf derselben Box mit transform: --- und position: fixed. Das Element bleibt in Position: statisch, wenn eine Transformation vorliegt.

7
Becario Senior

mit jquery kann ich mir das einfallen lassen. es rollt nicht glatt, aber es macht den Trick. Sie können nach unten scrollen, und das festgelegte Div wird oben angezeigt.

DAS CSS

<style type="text/css">
    .btn_cardDetailsPg {height:5px !important;margin-top:-20px;}
    html, body {overflow-x:hidden;overflow-y:auto;}
    #lockDiv {
  background-color: #fff;
  color: #000;
  float:left;
  -moz-box-shadow: 0px 4px 2px 2px #ccc;-webkit-box-shadow: 0px 4px 2px 2px #ccc;box-shadow:0px 4px 2px 2px #ccc;
  }
#lockDiv.stick {
  position: fixed;
  top: 0;
  z-index: 10000;
  margin-left:0px;
  }
</style>

DAS HTML

<div id="lockSticky"></div>
<div id="lockDiv">fooo</div>

DIE JQUERY

<script type="text/javascript">
    function sticky_relocate() {
        var window_top = $(window).scrollTop();
        var div_top = $('#lockSticky').offset().top;
        if (window_top > div_top)
            $('#lockDiv').addClass('stick')
        else
            $('#lockDiv').removeClass('stick');
    }
    $(function() {
        $(window).scroll(sticky_relocate);
        sticky_relocate();
    });
</script>

Schließlich möchten wir feststellen, ob der iPod touch im Quer- oder Hochformatmodus entsprechend angezeigt wird

<script type="text/javascript">
    if (navigator.userAgent.match(/like Mac OS X/i)) {
        window.onscroll = function() {

        if (window.innerWidth > window.innerHeight) {
            //alert("landscape [ ]");
            document.getElementById('lockDiv').style.top =
            (window.pageYOffset + window.innerHeight - 268) + 'px';
        }

        if (window.innerHeight > window.innerWidth) {
            //alert("portrait ||");
            document.getElementById('lockDiv').style.top =
            (window.pageYOffset + window.innerHeight - 418) + 'px';
        }
        };
    }
</script>
1
abdullah

Obwohl das CSS-Attribut {position:fixed;} (vorwiegend) auf neueren iOS-Geräten zu funktionieren scheint, ist es möglich, dass das Gerät gelegentlich und ohne Grund oder Grund auf {position:relative;} zurückgreifen kann. Normalerweise hilft das Leeren des Cache, bis etwas passiert und die Laune erneut auftritt.

Insbesondere von Apple selbst Vorbereitung Ihrer Webinhalte für iPad :

Safari auf dem iPad und Safari auf dem iPhone haben keine anpassbaren Fenster. Im Bei Safari auf iPhone und iPad ist die Fenstergröße auf die Größe von .__ eingestellt. Bildschirm (abzüglich der Bedienelemente der Safari-Benutzeroberfläche) und kann nicht geändert werden vom Benutzer. Um sich auf einer Webseite zu bewegen, ändert der Benutzer die Zoomstufe und die Position des Ansichtsfensters, wenn Sie doppelt zoomen oder oder durch Berühren und Ziehen, um die Seite zu verschieben. Als Benutzer ändert sich die Zoomstufe und die Position des Ansichtsfensters, das sie damit tun, innerhalb einer sichtbarer Inhaltsbereich mit fester Größe (dh das Fenster). Das heisst die Webseitenelemente, deren Position im Viewport "fixiert" ist kann außerhalb des sichtbaren Inhaltsbereichs außerhalb des Bildschirms enden.

Was ironisch ist, scheinen Android-Geräte dieses Problem nicht zu haben. Es ist auch durchaus möglich, {position:absolute;} in Bezug auf das body-Tag zu verwenden und keine Probleme zu haben.

Ich habe die Ursache für diese Eigenart gefunden. dass das Scroll-Ereignis nicht Nice spielt, wenn es in Verbindung mit dem HTML- oder BODY-Tag verwendet wird. Manchmal feuert das Ereignis nicht gerne ab oder Sie müssen warten, bis das Scroll-Swing-Ereignis abgeschlossen ist, um das Ereignis zu erhalten. Insbesondere wird das Ansichtsfenster am Ende dieses Ereignisses neu gezeichnet, und fixierte Elemente können an anderer Stelle im Ansichtsfenster neu positioniert werden.

Ich mache das also: (vermeide die Verwendung des Viewports und bleibe beim DOM!)

<html>
  <style>
    .fixed{
      position:fixed;
      /*you can set your other static attributes here too*/
      /*like height and width, margin, etc.*/
      }
    .scrollableDiv{
      position:relative;
      overflow-y:scroll;
      /*all children will scroll within this like the body normally would.*/
      } 
    .viewportSizedBody{
      position:relative;
      overflow:hidden;
      /*this will prevent the body page itself from scrolling.*/
      } 
  </style>
  <body class="viewportSizedBody">
    <div id="myFixedContainer" class="fixed">
       This part is fixed.
    </div>
    <div id="myScrollableBody" class="scrollableDiv">
       This part is scrollable.
    </div>
  </body>
  <script type="text/javascript" src="{your path to jquery}/jquery-1.7.2.min.js"></script>
  <script>
    var theViewportHeight=$(window).height();
    $('.viewportSizedBody').css('height',theViewportHeight);
    $('#myScrollableBody').css('height',theViewportHeight);
  </script>
</html>

Dies bedeutet im Wesentlichen, dass der BODY die Größe des Ansichtsfensters hat und nicht scrollbar ist. Das verschachtelbare DIV, das in einem verschachtelten DIV verschachtelt ist, wird wie normal BODY gescrollt werden (abzüglich des Swing-Effekts, sodass das Scrollen am Berührungspunkt stoppt.) Das feste DIV bleibt fest und bleibt ohne Interferenz erhalten.

Als Randbemerkung ist ein hoher z-index-Wert auf dem festen DIV wichtig, damit der scrollbare DIV dahinter bleibt. Normalerweise füge ich auch Fenstergrößen für die Größenänderung und den Bildlauf hinzu, um die Kompatibilität zwischen Browsern und anderen Bildschirmauflösungen zu gewährleisten.

Wenn alles andere fehlschlägt, funktioniert der obige Code auch, wenn sowohl die festen als auch die scrollbaren DIVs auf {position:absolute;} eingestellt sind. 

1
Talvi Watia

Die einfache Möglichkeit, dieses Problem zu beheben, besteht darin, die Transformationseigenschaft für Ihr Element einzugeben. und es wird behoben. Fröhliches Coding :-)

.classname{
  position: fixed;
  transform: translate3d(0,0,0);
}

Auch Sie können seinen Weg auch versuchen, dies funktioniert auch gut.

.classname{
      position: -webkit-sticky;
    }
0
Amit Verma

In meinem Fall wurde beim Scrollen das position: fixed-Element angezeigt, das beim Hinzufügen zum DOM ursprünglich nicht angezeigt wurde. Also habe ich einfach das Scroll-Ereignis ausgelöst, das wiederum eine Neuzeichnung und ein Voila auslöste.

window.scrollTo(window.scrollX, window.scrollY);
0
Eran Goldin