Arrière-plan: Fixe ne fonctionne pas sur iOS

J'essaie de trouver une solution au problème que j'ai avec des arrière-plans fixes sur les appareils iOS. Je préférerais ne pas avoir à tout redessiner pour ce site Web, et j'espère que certains changements CSS peuvent le réparer. This est ce que le site ressemble à l'iPhone, et this est ce qu'il devrait ressembler. Le code CSS J'utilise est la suivante:Arrière-plan: Fixe ne fonctionne pas sur iOS

.container { 
    min-width: 320px; 
    max-width: 480px; 
    margin: 0 auto; 
} 

.fixed-background { 
    height: 800px; 
    -webkit-backgound-size: cover; 
    -o-backgound-size: cover; 
    -moz-backgound-size: cover; 
    background-size: cover; 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    background-position: center center; 
    text-align: center; 
    overflow: auto; 
}

J'ai aussi essayé d'utiliser une requête @media pour le fixer pour iOS à l'aide de quelques messages sur stackoverflow, mais cela ne semblait pas avoir d'effet:

@media screen and (min-color-index:0) and (-webkit-min-device-pixel-ratio:0) { 
    .fixed-background { 
     background-attachment: scroll; 
    } 
}

HTML

<div class="fixed-background bg-1"> 
    <div class="container"> 
     <div class="title"> 
      <h1>ROOK PROPERTY<br>MANAGEMENT INC.</h1> 
      <h2>CONDOMINIUM MANAGEMENT</h2> 
     </div> 
    </div> 
</div>

Source

2017-01-03 Jordan U.

Avez-vous essayé cette http://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios – Shashi

Après un débat, j'ai fini par utiliser la position: faire défiler pour le mobile css. Merci pour l'information. –

Je pense que cela répond à votre question: http://stackoverflow.com/questions/24154666/background-image-size-cover-not-working-on-ios/43058483#43058483 –

Je suis juste allé par la même question, et voici comment je l'ai résolu.

Tout d'abord, vous devez déclarer votre corps et html à 100% de large et 100% de hauteur:

html, body{ 
 
\t width: 100%; 
 
\t height: 100%; 
 
}

Ensuite, le défilement sur votre page ne peut pas être fait par le corps: vous devez l'envelopper dans un conteneur. Ce conteneur a besoin de trois paramètres: débordement: défilement, largeur: 100% et hauteur: 100%. Je recommande envelopper l'ensemble du site en elle:

#wrapper{ 
 
\t \t width: 100%; 
 
\t \t height: 100%; 
 
\t \t overflow: scroll; 
 
\t }

Si vous ne l'aimez pas comment il défile, vous pouvez aussi essayer d'ajouter -webkit-overflow-scrolling: touch.

Espoir qui vous aide/qui vient chercher ceci!

Source

2017-07-18 06:42:23

-1

à tous mes div avec un fond fixe ajouter les classes class="parallax iparaxify paraxify" Et dans mon fichier css j'ai:

.parallax { 
width: 100%; 
background url(../images/bg.jpg) no-repeat center center; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
}

Et enfin faire parallaxe pour tout sauf les produits i

.paraxify { 
    background-attachment: fixed; 
    background-position: center center; 
    background-size: cover; 
}

À la fin désactiver position:fixed pour ipad, iphone et ipod avec jquery

// adds mobile class, and mobile os to html tag 
jQuery(document).ready(function($){ 
var deviceAgent = navigator.userAgent.toLowerCase(); 

if (deviceAgent.match(/(iphone|ipod|ipad)/)) { 
$('.iparaxify').removeClass('paraxify'); 
} 
});

Source

2017-10-12 00:41:04

Arrière-plan: Fixe ne fonctionne pas sur iOS

Répondre

Questions connexes