Si vous avez déjà essayé d’utiliser background-attachment: fixed pour un effet de parallaxe, vous avez peut-être remarqué que cela fonctionne bien sur Chrome, Firefox et Edge, mais que Safari pose problème. L’effet peut être saccadé, ne pas s’afficher correctement ou même ne pas fonctionner du tout.

Après plusieurs tests, j’ai trouvé une solution 100% CSS qui fonctionne parfaitement sous Safari, sans utiliser de JavaScript. Cet article explique le problème, pourquoi Safari réagit ainsi, et surtout comment le corriger proprement.

Voici la video exemple (à gauche le problème, à droite, le site corrigé) :

Pourquoi background-attachment: fixed ne fonctionne pas bien sous Safari ?

Contrairement aux autres navigateurs, Safari ne gère pas toujours bien le rendu des arrière-plans fixes. Voici pourquoi :

• Optimisation excessive du rendu : Safari essaie d’économiser des ressources en ne mettant pas toujours à jour le fond en fixed comme il le devrait.
• Mauvaise gestion du background-attachment: fixed sur certaines configurations (notamment les écrans Retina).
• Problème de synchronisation avec le défilement inertiel sur macOS et iOS.

Symptômes courants sur Safari

✔ L’effet fixed est absent ou remplacé par scroll.
✔ Le fond semble figé à un endroit incorrect.
✔ Des saccades ou un mauvais rendu apparaissent pendant le scroll.

---

La solution 100% CSS qui fonctionne partout

Au lieu d’utiliser background-attachment: fixed, on va le simuler avec un ::before en position: fixed. Cette approche est plus fiable et plus fluide sur tous les navigateurs.

Le HTML :

<div class="parallax-container">
    <div class="parallax" style="background-image:url('/photos/ma_photo_de_fond.jpg')"></div>
</div>

Le CSS :

.parallax-container {
    position: relative;
    width: 100%;
    height: 400px; /* Ajustez la hauteur selon vos besoins */
    background-color: silver;
    overflow: hidden; /* Empêche les débordements */
}

.parallax {
    height: inherit;
    left: 0;
    top: 0;
    width: 100%;
    clip-path: inset(0 0 0 0); /* Garde l'image confinée */
}

.parallax::before {
    content: "";
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background: inherit; /* Utilise l'image définie dans le bloc parallax */
    /* on peut aussi définir l'image ici-même en CSS */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

---

Pourquoi cette solution fonctionne

• Elle utilise un élément ::before en position: fixed pour simuler background-attachment: fixed.
• L’image est définie dans le HTML, ce qui permet de la changer facilement sans toucher au CSS.
• Le clip-path: inset(0 0 0 0); empêche les débordements et garde l’image bien cadrée.
• Compatible avec Safari, Chrome, Firefox et Edge sans saccades.

See the Pen Fixed-background working on safari and iOS by Philippe Blanc (@crea64) on CodePen.

---

Cette solution remplace efficacement background-attachment: fixed sur Safari tout en restant 100% CSS. Elle est légère, rapide et facile à intégrer sur n’importe quel site.

Si vous avez rencontré ce problème sur Safari, testez cette méthode et dites-moi en commentaire si elle fonctionne bien chez vous !

Partagez cette astuce avec d’autres développeurs qui rencontrent le même problème.