• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Code funktioniert auf IOS-Geräten nicht. Was fehlt?

T

Tabula_Rasa

Mitglied
Hallo,

ich habe das Problem, dass folgender Code nicht auf Geräten mit dem Betriebssystem IOS funktioniert:

HTML: 
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>

.navigation ul {
  display: flex;
  flex-flow: row wrap;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  max-width: 800px;
  top: 0;
  background-color: black;
      position: fixed;
    top: 0;

}

.navigation li {
    float: left;
    flex-grow: 1;
    flex-shrink: 1;
}


li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
  border-bottom: none;
}

li a:hover {
    background-color: #214f99;
}

.navigation nav {
  display: flex;
  justify-content: center;
  margin-left: auto;
 margin-right: auto;
}


</style>
</head>
<body>

<div class="navigation">
  <nav>
    <ul>
      <li><a href="#"> 1 </li></a>
        <li><a href="#"> 2</li></a>
          <li> <a href="#">3</li></a>
    </ul>
  </nav>
</div>

</body>
</html>

Woran könnte das liegen? Die Navi-Leiste ist nicht in der Mitte, sondern die Hälfte ist nicht mehr zu sehen und geht über den rechten Rand hinaus.
 
Das ist kein iOS- sondern höchstens ein Browserproblem mit dem Safari. So auf Anhieb würde ich sagen, dass die Kombination von Flex und Floats eine schlechte Idee ist.
 
Ne tronjer. Ich habs mit verschiedenen Browsern auf meinem iPhone ausprobiert. Bei Chrome auf IOS geht das auch nicht
 
Also es ist alles um 50% nach rechts verschoben
Da zeigt er es ganz normal an
Edit: Auch wenn ich das Handy drehe ist es um 50% nach rechts verschoben
 
Hallo

Zunächst sollten die schließenden li- und a-Elemente getauscht werden.

Float wird von Flexbox ausgehebelt. Float stört also nicht, kann aber auch weggelassen werden.

Die beschriebene Darstellung tritt bei mir auch mit Chrome 51.0.2704.106 unter Windows 7 auf.

Das Problem liegt in der Verschachtelung und der gleichzeitigen Verwendung von Flexbox und position: fixed.

Verschachtelung: Durch position: fixed wird der Container aus dem Dokumentenfluß genommen und orientiert sich nur noch am body. Deshalb sollten Container mit position: fixed auch direkt im body stehen und nicht in zusätzlichen Containern, hier div.navigation und nav. Die beiden haben dadurch keinen Inhalt mehr. Das wird sichtbar, wenn die eine Hintergrundfarbe erhalten.

Gleichzeitige Verwendung: Offensichtlich ist nicht genau geregelt (oder Chrome / IOS enthält einen Fehler) wie sich Container mit gleichzeitigem Flexbox und position: fixed verhalten sollen. Wie die beiden Anweisungen sich gegeneinander verhalten sollen.

Deshalb sollte zunächst einen Container nur für position: fixed direkt im body erstellt werden. Darin ein Hilfscontainer für Flexbox. Die Liste ist überflüssig und kann weggelassen werden. Das sieht dann so aus:

Code: 
<body>
   <nav class="navigation">
      <div>
         <a href="">1</a>
         <a href="">2</a>
         <a href="">3</a>
      </div>
   </nav>
</body>

Dazu dann das folgende CSS

Code: 
   .navigation {
      position: fixed;
      top: 0;
      width: 100%;
   }
   .navigation div {
      background-color: black;
      max-width: 800px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
   }
   .navigation a {
      color: white;
      text-align: center;
      text-decoration: none;
      outline: none;
      padding: 16px;
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 1px;
   }
   .navigation a:hover {
      background-color: #214f99;
   }

Eine Beispielseite direkt zum Ausprobieren:

http://boratb.bplaced.net/index54.html

Wobei ich auf position: fixed komplett verzichten würde. Bei position: fixed muss sonst bei einem Responsive Design häufig der obere Abstand der restlichen Seite angepasst werden.

Das kann vermieden werden wenn mit Flexbox eine Art Sticky-Navigation erstellt wird. Die Sticky-Navigation kann dann ihre Höhe ändern ohne das dadurch weitere Probleme entstehen und Abstandsanpassungen notwendig werden.

Ich habe auch dafür mal ein Beispiel erstellt:

http://boratb.bplaced.net/index55.html

Nachtrag: Mit der aktuellen Chrome Version 59.0.3071.115 funktioniert die Seite wie unter Firefox, das Problem tritt also nicht auf. Es scheint sich also um ein Browserproblem zu handeln, welches bei neueren Versionen behoben wurde.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Wann tritt denn das Problem in Chrome auf?
Ich habe es die ganze Zeit ausprobiert. Es verschob sich erst ab einer Breite von 175px. Das iPhone 6 hat aber mehr als das. Es kann also nicht das gewesen sein. Auf dem Rechner funktionierte wie gesagt alles einwandfrei. Nur auf dem iPhone eben nicht.

Edit:
Deine neuer Code funktioniert und ist ich hätte es auch anders geschrieben, aber selbst wenn ich position fixed weggenommen habe und es damit ein Bestandteil dess bodys war und ich die flexboxen sogar ganz entfernt hatte, war es immer noch so.
Wie auch immer es hat ja jetzt funktioniert.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben