verschwinden position festen header in mobile safari ios7

Habe ich schon Durcheinander mit diesen ganzen Tag und kann nicht scheinen zu finden, a fix.

Habe ich eine einfache ul, das wirkt wie eine Feste Kopfzeile mit den folgenden css:

body {
  width: 100%;
  height: 100%;
  min-height: 100%;       
}

.stream .header {
     position: fixed;
     width: 100%;
     height: 41px;
     top: 0;
     right: 0;
     left: 0;
     z-index: 10;
     margin-bottom: 10px;
     list-style: none;
   }

Den Inhalt unter dem header hat das folgende css:

.stream .stream-content {
  position: relative;
  padding-top: 41px;
  -webkit-transform: translate3d(0, 0, 0);
}

Wenn die Seite gescrollt ist in ios7 mobile safari, passiert Folgendes:

zuerst nach unten scrollen --
Kopf bewegt sich mit der Seite top in Ordnung, bis scrolling abgeschlossen ist.
zweite nach unten scrollen -- header vollständig verschwunden und nicht wieder angezeigt, wenn das scrollen fertig ist.
scroll up (mit header noch sichtbar) -- header vollständig verschwunden und nicht wieder, wenn Sie oben auf der Seite erreicht ist.
scroll up (mit header ausgeblendet) -- header verborgen bleibt und nicht wieder, wenn Sie oben auf der Seite erreicht ist.
scroll up (schon oben auf der Seite mit Kopfzeile ausgeblendet) -- header wieder angezeigt und funktioniert normal bis die Seite nach unten gescrollt zweimal.

Ich nicht dass dieses Problem mit iOS6 mobile safari, also das Problem scheint im Zusammenhang mit der neuen url-Leiste Größenanpassung auf Blättern.

Jemand anderes mit ähnlichen Problemen? Vorschläge willkommen.

Update:

So scheint es, dass das entfernen -webkit-transform3d() auf die Kopfzeile die übergeordneten (.stream) behebt das Problem, es muss also ein Konflikt den Weg der übergeordnete div-Element gerendert wird und der Kopf innen.

Noch auf der Suche nach einer Arbeit um, obwohl.

InformationsquelleAutor fscof | 2013-10-11

16

Ich hatte das gleiche Problem, es scheint ein Fehler zu sein, der Auftritt, wenn zu viel Los ist in der Seite, ich war in der Lage, es zu beheben, indem Sie den folgenden code transformieren, um die Feste position-element ( transform: translateZ(0);-webkit-transform: translateZ(0); ), die erzwingt, dass der browser die Hardwarebeschleunigung verwenden, um Zugriff auf das Gerät graphical processing unit (GPU), um die Pixel Fliegen. Web-Anwendungen, auf der anderen Seite, laufen im Kontext des Browsers, die es erlaubt, die software zu tun, die meisten (wenn nicht alle) das rendering, wodurch weniger PS für übergänge. Aber das Web wurde aufgeholt, und die meisten browser-Anbieter bieten nun eine grafische Hardwarebeschleunigung durch bestimmte CSS-Regeln.

Mit -webkit-transform: translate3d(0,0,0); kick-GPU in Aktion für die CSS-übergänge, wodurch Sie glatter (höhere FPS).

Hinweis: translate3d(0,0,0) tut sich nichts in Bezug auf was Sie sehen. es verschiebt das Objekt von 0px in x -, y-und z-Achse. Es ist nur eine Technik zu zwingen, die hardware-Beschleunigung.
```
#header {
    position: fixed;
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    -webkit-transform: translateZ(0);
    -webkit-font-smoothing: antialiased; /* seems to do the same in Safari */
}
```
- Vielen Dank - kam zu dem gleichen Ergebnis zurück, wenn ich die Arbeit an diesem. Etwas relevant ist, hier weitere details zu den performance-Kompromisse zwischen der position abs und transformieren, übersetzen in mobile safari: stackoverflow.com/questions/11100747/...
InformationsquelleAutor Neo
0

Dies geschieht, wenn der browser noch nicht neu gestrichen, die Elemente in der Zeit und so scheint, als wenn es verschwindet und dann wieder erscheint auf Blättern.

wenn die obige Antwort für Sie nicht funktioniert, verwenden Sie eine unendliche css-animation, die auf das element, zwingen Sie den browser, um zu halten aktualisiert das element.

hier ist der code!
```
@keyframes repaint {
  from {
    width: 99.999%
  }
  to {
    width: 100%;
  }
}


.positionsticky {
    animation: repaint 1ms;
  animation-iteration-count: infinite;
}
```
InformationsquelleAutor user2993497
0

Ich hatte dieses problem auf iPhone-SE. Habe versucht, die -webkit-transform: translateZ(0); trick, aber es hat nicht geholfen. Das element ich mich bewegen wollte, war auf der Unterseite des ersten Blättern und ich wollte es um position: fixed-status, nachdem der Benutzer hatte gescrollt, um es (Problem gelöst mit js). Arbeitete auch sonst überall, aber auf SE, das element verschwunden. Aus irgendeinem Grund zog es das element, aus dem Bildschirm, nachdem Sie die Einstellung oben: 0, es behoben das problem für mich.
```
.sticky_menu {
   position: fixed;
   top: 0;
}
```
InformationsquelleAutor yodalr
-2

Ich Stand vor dem gleichen Problem mit dem iPad. Ich habe versucht, durch hinzufügen von code für das iPad im JS Teil als:
```
if(navigator.userAgent.match(/iPad/i)) {
    //written code to scrolldown the header part
}
```
Es funktionierte für mich.

InformationsquelleAutor mounika

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.