Background-attachment:fixed ne fonctionne Pas - Android Chrome (v40)
Fond
( Ce qui a été demandé avant, de nombreuses fois, je sais. Cependant, il semble avoir été causée par des choses différentes à chaque fois. J'ai passé environ quatre StackOverflow réponse fils et tout essayé. Rien ne semble marche plus, je crois que c'est un nouveau problème. )
De toute façon, j'ai un HMTL élément avec une image de fond qui doit être fixe, à l'aide de background-attachment:fixed;
- Tous les navigateurs de bureau - Travaux
- Mobile Firefox Fonctionne
- Par Défaut Android/Samsung Navigateur Fonctionne
- Mobile de Chrome Ne fonctionne pas
J'ai tourné le problème dans un cadre plus simple, reproductible de test, qui est une seule section
élément, un ensemble de200%
de la hauteur de la page, avec l'arrière-plan plein écran et fixe.
Code
CSS:
html,body {
padding:0;
margin:0;
height:100%;
width:100%;
}
section {
background-position:center center;
background-attachment:fixed;
background-size:cover;
background-image:url(http://www.andymercer.net/wp-content/themes/andymercer/images/background/home.png);
height:200%;
width:100%;
}
HTML:
<section>Test</section>
JSFiddle Pour Les Tests
Pour tester plus facilement sur votre smartphone que d'un fragment de code: http://jsfiddle.net/LerLz1L2/
Choses que j'ai Essayé de
backface-visibility: hidden;
-webkit-backface-visibility:inherit;
-webkit-transform: translate3d(0,0,0);
- Réglage de l'élément et tous les parents à
position:static
- Il n'est également pas de travail pour moi. Je n'ai pas encore trouvé une solution. Chrome 54.0.2840.85 fonctionnant sur Android Nougat.
- Difficile de croire qu'ils n'ont toujours pas résolu ce - Chrome 57.0.2987.132 sur Android 7.0.0. Il touche les dégradés linéaires et régulière JPG images d'arrière-plan. Pas l'une des suggestions de solutions de contournement que j'ai essayé a travaillé.
- Juste pour préciser - si la page a besoin seulement de défilement verticale, c'est pas trop mal. Lorsque la barre d'adresse disparaît, que la quantité d'espace apparaît alors en bas, et n'est pas rempli avec le dégradé linéaire ou image d'arrière-plan. Mais si la page a besoin de tout le défilement HORIZONTAL, tout l'enfer se déchaîne.
Vous devez vous connecter pour publier un commentaire.
Le code ci-dessous a bien fonctionné pour moi dans l'android de google chrome.
Je l'ai obtenu à partir de ici
html { height: 100% }
(qui OP avait déjà) et-webkit-background-size: cover;
— le-moz-
n'est probablement pas non plus nécessaire, et l'-o-
, je ne sais pas.Eu d'énormes problèmes avec cela - c'est un problème récurrent dans android (datant de ver 4.0.0 au moins), qui n'est pas encore entièrement résolu. Bug-report ici: https://issuetracker.google.com/issues/36908439
Mon android machine de test s'exécute chrome 60 sur Android 7.0.0 - pas encore totalement fixé. Haut ou le centre aligné origines semblent fonctionner bien, mais le fond de l'alignement, et en bas à droite en particulier, est un cauchemar en android.
Meilleure solution de contournement que j'ai trouvé, est de placer votre image de fond fixe dans un distinct div, par opposition à l'arrière-plan du navigateur lui-même... (
Ensemble de votre div à 100% de la fenêtre d'affichage de la hauteur et la largeur, en donna un à position fixe et un z-index de -10, puis placez tous vos fond inage style dans des div à la place, laissant le navigateur en arrière-plan en blanc.
De mettre l'image d'arrière-plan dans le navigateur est lag, au mieux, et la plupart des autres solutions de contournement que j'ai trouvé créer de nervosité défilement dans les anciens navigateurs IE.
Tous mes arrière-plan-image style fonctionne parfaitement lorsqu'il est placé dans un div. C'est seulement quand les plaçant dans un navigateur, le fond lui-même que les choses vont de travers.
Espère que cette aide.
Cela fonctionne pour presque tous les navigateurs, sauf native android, navigateur
Il est fortement recommandé de définir l'url de l'image première
La recherche d'une solution pour le bug (background-attachment: fixed) sur le navigateur android.
Espoir aide!