Compatibilité Safari et CSS : La liste des bugs + solution

Safari est souvent le navigateur qui révèle les failles de votre CSS. Un design parfait sur Chrome peut rapidement se casser sur Safari à cause de différences de rendu, de compatibilité ou de gestion des propriétés modernes. Dans ce guide, vous allez découvrir les principaux pièges CSS spécifiques à Safari et apprendre à les corriger simplement pour garantir un affichage fiable sur tous les appareils.

• Certains styles CSS fonctionnent différemment sur Safari et éviter des bugs difficiles à diagnostiquer
• Anticiper les incompatibilités les plus courantes pour gagner du temps lors du développement et des tests
• Rendre vos interfaces plus fiables et cohérentes sur tous les appareils, y compris iPhone et Mac

Vous avez déjà vécu ce moment frustrant : votre site est parfait sur Chrome… et complètement cassé sur Safari ? Rassurez-vous, vous êtes loin d’être seul. Le navigateur d’Apple a ses petites particularités, et certaines règles CSS pourtant “standards” peuvent s’y comporter de manière… disons… créative.

Dans ce tutoriel, vous allez découvrir tous les pièges CSS spécifiques à Safari, expliqués simplement, avec des exemples concrets et du code que vous pourrez tester immédiatement. L’objectif est clair : vous aider à anticiper les bugs, comprendre pourquoi ils apparaissent, et surtout savoir les corriger sans y passer des heures.

Pourquoi Safari pose problème avec le CSS ?

Avant de plonger dans les pièges, il faut comprendre une chose essentielle : Safari utilise son propre moteur de rendu, appelé WebKit.

Cela implique deux réalités :

• D’un côté, Safari respecte les standards CSS… mais parfois avec un léger décalage.
• De l’autre, certaines fonctionnalités CSS modernes sont implémentées plus tardivement (ou différemment).

Résultat, votre code CSS parfaitement valide peut mal fonctionner sur Safari. Et inversement, un hack spécifique peut être nécessaire uniquement pour ce navigateur

1. Le problème des unités vh sur Safari (iOS)

Commençons par un classique qui fait perdre des heures.

Le problème

Sur Safari mobile, l’unité vh (viewport height) ne correspond pas toujours à la hauteur visible réelle. Par exemple :

.hero {
    height: 100vh;
}

Sur iPhone, vous pourriez avoir :

• un espace vide en bas
• ou un contenu coupé

Parce que Safari inclut parfois la barre d’adresse dans le calcul… et parfois non. Oui, c’est aussi flou que ça en a l’air.

La solution moderne

Utilisez les nouvelles unités dynamiques :

.hero {
    height: 100dvh;
}

Ou une solution fallback :

.hero {
    height: 100vh;
    height: -webkit-fill-available;
}

L’astuce consiste à combiner les deux pour une compatibilité maximale.

👉 Pour aller plus loin : Les unités viewport en CSS pour des mises en page modernes.

2. Flexbox et les bugs… inattendus

Flexbox est censé simplifier la vie. Sur Safari, parfois… il la complique.

Problème classique : flex: 1 mal interprété

.item {
    flex: 1;
}

Sur Safari, cela peut donner des tailles incohérentes.

Solution plus fiable

.item {
    flex: 1 1 0%;
}

Parce que Safari interprète différemment la valeur par défaut du flex-basis.

Problème avec min-height dans un flex container

.container {
    display: flex;
}

.child {
    min-height: 100%;
}

Sur Safari… ça peut ne rien faire.

Solution

Ajoutez explicitement :

.container {
    display: flex;
    align-items: stretch;
}

3. Grid CSS : attention aux surprises

Safari supporte CSS Grid… Mais pas toujours comme prévu.

Problème avec auto-fit et auto-fill

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Safari peut mal gérer le redimensionnement.

Solution

Parfois, une valeur fixe est plus fiable :

grid-template-columns: repeat(3, 1fr);

Ou utilisez un fallback avec media queries.

4. Les animations CSS capricieuses

Safari adore… ignorer certaines animations.

Exemple

@keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.box {
    animation: fade 1s;
}

Et là… rien ne se passe.

Solution

Ajoutez le préfixe WebKit :

@-webkit-keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.box {
    -webkit-animation: fade 1s;
    animation: fade 1s;
}

• Oui, en 2026, on utilise encore parfois des préfixes…

Propriétés CSS avec préfixe WebKit

Propriété standard	Préfixe WebKit	Remarque
appearance	-webkit-appearance	Toujours utile sur iOS
backdrop-filter	-webkit-backdrop-filter	Encore requis sur Safari
background-clip	-webkit-background-clip	Utile pour text
box-reflect	-webkit-box-reflect	Non standard (Safari only)
clip-path	-webkit-clip-path	Ancien Safari
filter	-webkit-filter	Anciennes versions
hyphens	-webkit-hyphens	Pour césure
mask	-webkit-mask	Très utilisé sur Safari
mask-image	-webkit-mask-image	Idem
mask-size	-webkit-mask-size	Idem
mask-repeat	-webkit-mask-repeat	Idem
text-size-adjust	-webkit-text-size-adjust	Mobile Safari
user-select	-webkit-user-select	Toujours utile
transform	-webkit-transform	Anciennes versions
transform-origin	-webkit-transform-origin	Anciennes versions
transform-style	-webkit-transform-style	Anciennes versions
perspective	-webkit-perspective	Anciennes versions
perspective-origin	-webkit-perspective-origin	Anciennes versions
backface-visibility	-webkit-backface-visibility	Anciennes versions

Animations & transitions

Propriété standard	Préfixe WebKit
animation	-webkit-animation
animation-delay	-webkit-animation-delay
animation-direction	-webkit-animation-direction
animation-duration	-webkit-animation-duration
animation-fill-mode	-webkit-animation-fill-mode
animation-iteration-count	-webkit-animation-iteration-count
animation-name	-webkit-animation-name
animation-play-state	-webkit-animation-play-state
animation-timing-function	-webkit-animation-timing-function
transition	-webkit-transition
transition-property	-webkit-transition-property
transition-duration	-webkit-transition-duration
transition-timing-function	-webkit-transition-timing-function
transition-delay	-webkit-transition-delay

Flexbox (ancienne spécificité Safari)

Propriété standard	Préfixe WebKit
display: flex	display: -webkit-box / -webkit-flex
flex	-webkit-flex
flex-direction	-webkit-flex-direction
flex-wrap	-webkit-flex-wrap
flex-flow	-webkit-flex-flow
justify-content	-webkit-justify-content
align-items	-webkit-align-items
align-content	-webkit-align-content
align-self	-webkit-align-self
order	-webkit-order

Spécifiques WebKit (non standard)

Propriété	Description
-webkit-line-clamp	Limite le nombre de lignes (très utilisé)
-webkit-box-orient	Nécessaire avec line-clamp
-webkit-text-fill-color	Couleur texte (gradient hack)
-webkit-text-stroke	Contour du texte
-webkit-overflow-scrolling	Scroll fluide iOS
-webkit-tap-highlight-color	Couleur du tap mobile
-webkit-touch-callout	Désactiver menu iOS
-webkit-font-smoothing	Rendu des polices

Aujourd’hui, très peu de propriétés nécessitent encore un préfixe

Les 3 cas critiques Safari en 2026 :

• -webkit-backdrop-filter
• -webkit-appearance
• -webkit-line-clamp (avec -webkit-box)

Le reste concerne surtout la compatibilité ancienne et les comportements spécifiques iOS

5. Les positions sticky qui ne collent pas

La propriété CSS position: sticky est très pratique… sauf quand elle ne fonctionne pas.

Problème

.header {
    position: sticky;
    top: 0;
}

Sur Safari, cela peut ne pas fonctionner si :

• le parent a overflow: hidden
• ou overflow: auto

Solution

Évitez ces propriétés sur les parents :

.parent {
    overflow: visible;
}

👉 Pour aller plus loin : Le positionnement CSS

6. Les inputs et formulaires… version Safari

Safari adore personnaliser les champs HTML… parfois trop.

Exemple avec les boutons

button {
    appearance: none;
}

Sur Safari, il faut souvent le préfixe pour Webkit :

button {
    -webkit-appearance: none;
}

Sinon, le style natif reste actif.

Problème avec les inputs date

Safari ne supporte pas toujours :

<input type="date">

Cela provoque un affichage différent ou fallback en simple texte

Solution

Utilisez une librairie JS ou gérez un fallback UX.

7. Le problème du overflow et du scroll

Safari a une gestion… particulière du scroll.

Exemple

.container {
    overflow: auto;
}

Sur iOS, le scroll peut être :

• saccadé
• ou bloqué

Solution

Ajoutez :

.container {
    -webkit-overflow-scrolling: touch;
}

Cela active le scroll fluide natif.

8. Les z-index et les contextes d’empilement

Safari peut créer des bugs visuels étranges.

Exemple

.modal {
    position: fixed;
    z-index: 9999;
}

Mais elle passe derrière d’autres éléments…

Pourquoi ?

Safari crée des contextes d’empilement différents avec :

• transform
• filter
• opacity

Solution

Évitez les transform inutiles sur les parents.

9. Les images en object-fit

img {
    object-fit: cover;
}

Sur certaines versions de Safari… ça ne fonctionne pas.

Solution fallback

.container {
    background-image: url('image.jpg');
    background-size: cover;
}

👉 Pour en savoir plus : La propriété object-fit en CSS

10. Les bugs avec position: fixed sur mobile

Sur Safari iOS :

.menu {
    position: fixed;
    bottom: 0;
}

Peut bouger lors du scroll

Solution

Utilisez :

position: sticky;

ou gérez avec JavaScript.

11. Les variables CSS (custom properties)

Safari les supporte les variables CSS mais parfois mal dans certains contextes.

Exemple

:root {
    --main-color: red;
}

.box {
    color: var(--main-color);
}

Dans certains cas, lesanimations notamment, Safari peut bugger.

Solution

Prévoir des fallback :

color: red;
color: var(--main-color);

12. Les backdrop-filter et effets flous

Safari adore cet effet… mais différemment.

.blur {
    backdrop-filter: blur(10px);
}

Solution compatible

.blur {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

13. Les transformations CSS (transform) et les bugs invisibles

Les propriétés comme transform sont très puissantes en CSS. Pourtant, sur Safari, elles peuvent provoquer des effets inattendus… parfois totalement invisibles à première vue.

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Le problème

.card {
    transform: translateZ(0);
}

Ce genre de code est souvent utilisé pour améliorer les performances. Mais sur Safari, cela peut créer :

• des problèmes de flou
• des éléments qui disparaissent
• des bugs de superposition

Parce que Safari crée un nouveau contexte de rendu GPU, et ça peut casser l’ordre d’affichage.

La solution

Utilisez transform uniquement si nécessaire. Si un bug apparaît, testez sans :

.card {
    /* transform supprimé */
}

Oui, parfois la meilleure solution… c’est d’en faire moins.

14. Les problèmes avec clip-path

clip-path permet de créer des formes complexes. Très pratique… mais Safari peut être capricieux.

Exemple

.box {
    clip-path: circle(50%);
}

Sur certains Safari :

• la forme ne s’affiche pas
• ou elle est mal positionnée

Solution

Ajoutez le préfixe :

.box {
    -webkit-clip-path: circle(50%);
    clip-path: circle(50%);
}

Et évitez les formes trop complexes si vous ciblez des versions anciennes.

👉 Pour en savoir plus : La propriété clip-path en CSS

15. Les dégradés CSS (gradients) différents

Safari gère les gradients… mais pas toujours comme les autres navigateurs.

Exemple

background: linear-gradient(to right, red, blue);

Résultat possible :

• couleurs légèrement différentes
• rendu moins fluide

Pourquoi ?

Safari utilise parfois une interpolation des couleurs différente.

Solution

Testez toujours vos dégradés sur Safari et ajustez les couleurs si nécessaire.

👉 Tout savoir sur : Les codes couleur en CSS et Dégradé CSS : le guide complet pour débutants

16. Les polices web et le rendu du texte

Un autre piège souvent sous-estimé : le rendu des polices.

Le problème

Une police peut apparaître :

• plus fine
• plus floue
• ou mal espacée sur Safari

Exemple

body {
    font-family: 'Roboto', sans-serif;
}

Solution

Ajoutez :

body {
    -webkit-font-smoothing: antialiased;
}

Cela améliore le rendu sur macOS et iOS.

👉 Bien choisir sa police de caractères

17. Les SVG et Safari

Les SVG sont parfaits pour des designs modernes. Mais Safari peut mal interpréter certaines propriétés.

Exemple problématique

svg {
    width: 100%;
}

Sur Safari :

• le SVG peut déborder
• ou ne pas respecter les proportions

Solution

Ajoutez une viewBox correcte dans le SVG :

<svg viewBox="0 0 100 100">

Et contrôlez aussi :

svg {
    max-width: 100%;
    height: auto;
}

18. Les problèmes avec calc()

calc() est très pratique pour faire des calculs dynamiques en CSS.

Exemple

width: calc(100% - 20px);

Sur Safari :

• erreurs d’interprétation dans certains contextes
• surtout combiné avec flexbox ou grid

Solution

Simplifiez vos calculs ou testez des valeurs fixes si un bug apparaît.

19. Les media queries capricieuses

Safari peut mal interpréter certaines media queries, surtout sur mobile.

Exemple

@media (max-width: 768px) {
    .box {
        display: none;
    }
}

Sur iOS :

• comportement incohérent lors du changement d’orientation

Solution

Ajoutez des breakpoints supplémentaires ou utilisez :

@media screen and (max-width: 768px)

20. Les bugs avec overflow: hidden et les bordures arrondies

Un grand classique.

Exemple

.card {
    border-radius: 10px;
    overflow: hidden;
}

Sur Safari :

• les éléments enfants peuvent dépasser
• ou être mal coupés

Solution

Ajoutez :

.card {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

Oui, c’est un hack CSS… mais il fonctionne très bien.

21. Les transitions CSS instables

Safari peut parfois “sauter” certaines transitions.

Exemple

.box {
    transition: all 0.3s ease;
}

Résultat :

• animation saccadée
• ou ignorée

Solution

Ciblez précisément :

.box {
    transition: transform 0.3s ease;
}

Évitez all, surtout sur Safari.

👉 Tout savoir sur La propriété transition en CSS

22. Les bugs avec aspect-ratio

Propriété récente, donc… attention.

Exemple

.video {
    aspect-ratio: 16 / 9;
}

Sur Safari ancien :

• non supporté

Solution fallback

.video {
    position: relative;
    padding-top: 56.25%;
}

👉 Aller plus loin avec La propriété aspect-ratio en CSS

23. Le comportement étrange de cursor: pointer

Sur certains éléments personnalisés :

div {
    cursor: pointer;
}

Sur Safari :

• le curseur ne change pas toujours

Solution

Assurez-vous que l’élément est interactif :

<button>Click</button>

Safari aime les éléments HTML “logiques”.

24. Les iframe et les dimensions

Safari peut mal gérer les tailles.

Exemple

iframe {
    width: 100%;
}

Résultat :

• débordement
• scroll interne

Solution

Ajoutez :

iframe {
    max-width: 100%;
}

25. Les pseudo-éléments ::before et ::after

Parfois, Safari les ignore… sans prévenir.

Exemple

.box::before {
    content: "";
    display: block;
}

Si ça ne fonctionne pas :

• vérifiez le position
• vérifiez le parent

Solution classique

.box {
    position: relative;
}

Conseils pratiques pour éviter les bugs CSS sur Safari

Avec l’expérience, vous allez développer des réflexes.

• Testez toujours votre site sur Safari, même si vous êtes sur Windows (BrowserStack, par exemple).
• Utilisez des préfixes WebKit quand nécessaire.
• Évitez les propriétés trop “récentes” sans fallback.

Et surtout… gardez votre calme. Oui, même après 2h sur un bug invisible.

---

Safari n’est pas “cassé”… il est simplement différent. Et une fois que vous comprenez ses règles du jeu, vous pouvez parfaitement créer des interfaces robustes, propres et compatibles.

Le vrai déclic, c’est d’anticiper plutôt que corriger. En intégrant dès le départ les bonnes pratiques CSS pour Safari, vous gagnez un temps précieux et vous évitez des frustrations inutiles. Et entre nous… quel plaisir de voir un site fonctionner parfaitement partout, sans exception.

---

Développer en CSS, ce n’est pas seulement écrire du style… c’est aussi comprendre comment chaque navigateur interprète vos choix. Et Safari, avec ses particularités, vous oblige à devenir plus rigoureux, plus précis, presque plus “ingénieur” dans votre approche.

Mais la bonne nouvelle, c’est que ces pièges ne sont pas là pour vous ralentir. Au contraire, ils vous apprennent à construire des interfaces solides, durables et vraiment professionnelles. Et le jour où votre site fonctionnera parfaitement sur Safari du premier coup… vous saurez que vous avez franchi un cap.