Pourquoi mon image d'arrière-plan en plein écran tremble-t-elle sur Chrome mobile et comment puis-je y remédier ?

Système de l'image d'arrière-plan sur mobile Chrome

Lors du développement d'un site Web réactif avec une image d'arrière-plan plein écran qui passe sur mobile, tablette et sur le bureau, il a été observé que l'arrière-plan saute légèrement lorsque la barre d'adresse se cache sur les navigateurs iOS/Android ou Chrome sur Android.

Le problème vient de les propriétés CSS de l'image d'arrière-plan, qui incluent les paramètres "fixe" et "couverture". Lorsque la barre d'adresse disparaît, la hauteur du div d'arrière-plan change puisqu'elle est définie sur 100 % de hauteur. Cela affecte à son tour l'image d'arrière-plan, l'amenant à ajuster sa taille et sa position pour s'adapter à la nouvelle taille du conteneur.

Pour résoudre ce problème, deux solutions sont proposées :

Solution 1 : Utiliser l'unité CSS vh (non recommandé)

Régler la hauteur du div d'arrière-plan sur 100vh maintient le comportement souhaité ; cependant, il existe un bogue vh connu dans iOS qui provoque des incohérences dans les mesures des unités de fenêtre. Les tentatives visant à atténuer ce problème avec la hauteur maximale ou d'autres solutions de contournement ont échoué.

Solution 2 : utiliser Javascript pour définir la hauteur en fonction de la taille de la fenêtre

Javascript présente une solution plus approche fiable, car elle n'est pas affectée par le redimensionnement de la barre d'URL. En déterminant la taille de la fenêtre d'affichage et en définissant la hauteur du div d'arrière-plan en conséquence, l'image reste statique quelle que soit la visibilité de la barre d'adresse.

Voici le script Javascript :

var bg = $("#bg1, #bg2");

function resizeBackground() {
    bg.height($(window).height());
}

$(window).resize(resizeBackground);
resizeBackground();

Ajustement supplémentaire :

Bien que le script Javascript résolve le problème de redimensionnement de l'arrière-plan, un écart notable peut apparaître lors du défilement vers le bas. Ce problème peut être résolu en ajoutant un petit décalage au calcul de la hauteur d'arrière-plan, masquant ainsi l'écart potentiel.

function resizeBackground() {
    bg.height( $(window).height() + 60); // Add 60px to compensate for gap
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!