it-swarm.com.de

Problem mit ios7 behoben

Ich habe ein Projekt, das ich das feste Hintergrundbild verwende. Es funktioniert gut für alles außer ios7. Auf dem iPad ist das Hintergrundbild vergrößert und verschwommen. Hier ist der CSS-Code, den ich verwende -

.header {
  display: table;
  height: 100%;
  width: 100%;
  position: relative;
  color: #fff;
  background: url(../images/boston2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }

hier ist ein Link zur Live-Seite - www.wdeanmedical.com

Was vermisse ich?

34
user2560895

Die Verwendung von background-attachment: fixed mit background-size: cover verursacht Probleme bei den meisten mobilen Browsern (wie Sie gesehen haben). Sie können es mit background-attachment: scroll versuchen. Dies wird nicht den gewünschten Effekt erzielen, aber Sie sehen mindestens die Bilder. Sie können eine oder mehrere Medienabfragen verwenden, um sie mithilfe von @media screen and (max-device-width: 1024px){} auf Geräte zu beschränken, bei denen es sich um Tablets oder Telefone handelt.

OR

Sie können background-position: scroll verwenden und Javascript einschließen, mit dem das Bild an der gescrollten Position bleibt (es bleibt oben im Fenster): DEMO

39
brouxhaha

Ich hatte eine sehr einfache Lösung dafür, nachdem ich mit allen Methoden zu deren Behebung zu kämpfen hatte.

ich hatte das Problem auf meinem Handy IOS Geräte.

CSS (Desktop)

#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {
background-size: auto;
background-attachment: fixed;
}

.widget-wrap {
background-attachment: scroll;
}

Dann überschreibe ich es mit der Medienabfrage, die "repariert" als Hintergrundzubehör entfernt.

css (mobil)

/*-------- iPads (portrait and landscape) --------*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {

    background-attachment: initial;

}
}

initial - Setzt diese Eigenschaft auf ihren Standardwert. Ich denke, weil IOS 'fixed' nicht akzeptiert, fällt es auf einen Standardwert zurück, den es akzeptiert, scrollen.

Das hat bei mir auf jedem Gerät funktioniert. Hoffe, es hilft auch jemand anderem.

10
Ylama

Versuche dies:

HTML

<div class="container">
  <div class="fixed-img"></div>
  <h1>Words that go over text</h1>
</div>

css

.fixed-img {
  position: fixed;
  z-index: -1;
}

JSFiddle Beispiel

Live-Beispiel

5
Cruz Nunez

Wissen Sie, dass dies ein alter Thread ist, wollte aber eine aktualisierte Lösung bereitstellen, die auf der Lösung von @ Cruz-Nunez aufbaut

Wenn Sie sich auf die Größe des Ansichtsfensters verlassen, kann dies zum Scheitern führen. Wenn Sie sich beispielsweise auf ein 767px-Ansichtsfenster verlassen, wird dies auf iPads nicht funktionieren. Durch die Vergrößerung wird der Vorteil dieses Ansatzes zunichte gemacht.

Stattdessen können Sie überprüfen, ob das Gerät über Hover-Funktionen verfügt. Wenn dies nicht der Fall ist, können Sie Folgendes überschreiben:

@media (hover: none) {
   .homeHero {
       background-attachment: initial;
   }
}

Sie können auch überprüfen, ob das Gerät einen Kurszeiger (z. B. einen Finger) anstelle eines feinen Zeigers (z. B. eine Maus) enthält:

@media (pointer: coarse) { ... }
4
Tim
.header {background-position: -99999px -99999px;}
.header:before {content: ""; background-image: inherit; position: fixed; top: 0; left: 0; height: 100vh; width: 100%; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover; background-size: cover !important; z-index: -1;}

Ich glaube, ich habe den gewünschten Effekt auf meiner eigenen Website erzielt, indem ich die oben genannten Punkte in Verbindung mit einem Fix verwende, damit 100vh auf iOS-Geräten funktionieren kann.

2
MugenFTW

Die Ideen von @brouxhaha und @yllama kombinieren: Verwenden Sie eine Medienabfrage, die auf iOS abzielt, das unter SO post zu finden ist

background-attachment: scroll;

Auf diese Weise wird das feste Hintergrundbild für Nicht-iOS-Geräte und alle anderen Geräte angezeigt.

.widget-wrap {
   background-attachment: fixed;
   ...
   ...
}

@supports (-webkit-overflow-scrolling: touch) {
  .widget-wrap {
  background-attachment: scroll;
  }
}
0
Osprey Eagle

Was ist mit so etwas? (Ich habe gerade bemerkt, dass @mems es bereits vorgeschlagen hat)

    body {
      position: relative;
    }

    body:after {
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      content: '';
      background-image: url(./img/YOUR_IMG.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-color: #000;
      background-position: bottom right;
    }
0
Gianni Unz

Oder Sie können einfach ein transparentes Div platzieren, das den Bildschirm abdeckt, und den Überlauf verwenden: scrollen. Nur um es zu vereinfachen, können Sie die Höhe des div mit Javascript auf screen.height umschreiben.

#scrollbox {
        width: 100%;
        height: 100%;
        overflow: scroll;
        background: transparent;
}
document.getElementByID("scrollbox").style.height = screen.height;
0
Creedish