Résolvez le problème du décalage d'animation CSS et des barres de défilement personnalisées dans Firefox

Dans les navigateurs de Firefox, les performances des animations CSS diffèrent parfois des autres navigateurs, entraînant des animations bégayées. De plus, le style CSS de la barre de défilement personnalisée peut ne pas prendre effet. Cet article fournira des solutions détaillées à ces deux problèmes pour aider les développeurs à optimiser l'expérience d'application Web dans Firefox Browser.

Problème de décalage d'animation CSS

Lorsque vous utilisez des animations CSS, les développeurs peuvent rencontrer des animations qui fonctionnent bien dans des navigateurs tels que Chrome et Edge, mais il y a un bégaiement dans Firefox. Ceci est généralement causé par le mécanisme de rendu de certaines propriétés CSS dans Firefox qui est différent des autres navigateurs.

Dans l'exemple que vous avez fourni, le problème de bégaiement d'animation provient de l'affichage: contenu; propriété de l'élément de span .wrapper. Cet attribut entraîne que le contenu de l'élément soit «promu» directement dans l'élément parent, ce qui, dans certains cas, affecte les performances de rendu de Firefox et provoque le bégaiement de l'animation.

Solution:

Supprimer l'affichage: contenu; Propriété de l'élément Span .wrapper pour résoudre le problème du décalage d'animation.

 .wrapper Span {
  / * Affichage: contenu; * / / * Supprimer cette ligne * /
  -Webkit-text-stroke-width: 1.5px;
  Text-shadow: 0 0px var (- brshadow), 0 0px var (- tlshadow);
  Transformer: traduire (0, 100%) Rotation (2Deg);
  Animation: Jump 2s Facilite-in-Out Infinite;
  couleur: var (- colormain);
}

Explication des raisons:

Affichage: contenu; L'attribut amènera l'élément lui-même à générer aucune boîte, mais ses éléments enfants seront affichés comme les enfants directement de l'élément parent. Bien que cela soit très utile dans certains scénarios de mise en page, dans Firefox, en particulier lorsqu'il est utilisé avec l'animation, cela peut entraîner des problèmes de performances de rendu. Après avoir retiré cette propriété, l'élément Span .wrapper générera normalement une boîte, évitant ainsi les goulots d'étranglement de rendu de Firefox et permettant à l'animation de fonctionner en douceur.

Problèmes de style de barre de défilement personnalisés

En plus du bégaiement de l'animation, vous avez également mentionné le problème que les styles de barre de défilement personnalisés ne sont pas valides dans Firefox. En effet, Firefox implémente les barres de défilement personnalisées différemment des autres navigateurs.

Solution:

Afin de personnaliser les styles de barre de scroll dans Firefox, la propriété Color Scrollbar est requise. Cette propriété vous permet de spécifier la couleur de la barre de défilement et la couleur de la fente de défilement.

 html {
  taille de police: 63,5%;
  Overflow-X: Hidden;
  Scroll-Padding-top: 6rem;
  Faites défiler-behavior: lisse;
  Décoration du texte: aucune;
  Color de barre de défilement: var (- colormain) blanc; / * Ajouter cette ligne * /
}

Explication du code:

• Color de barre de défilement: var (- colormain) blanc; Cette ligne de codes définit la couleur de la barre de défilement à la couleur définie par la variable de colormain, et la couleur de la fente de défilement est blanche.
• Assurez-vous que: la variable - Colormain est définie dans la racine.

Notes:

• La propriété Color Scrollbar est spécifique à Firefox et peut ne pas être prise en charge par d'autres navigateurs.
• Pour les navigateurs tels que Chrome, Edge, etc., vous devez toujours utiliser la série pseudo-classe -webkit-scrollbar pour personnaliser le style de barre de défilement.

Exemple de code complet:

 :racine {
  - Colormain: # 4784E6;
}

* {
  Font-Family: «Nunito», Sans-Serif;
  marge: 0;
  rembourrage: 0;
  Dimensionnement en boîte: Border-Box;
  Aperçu: aucun;
  Border: aucun;
  Décoration du texte: aucune;
}

html {
  taille de police: 63,5%;
  Overflow-X: Hidden;
  Scroll-Padding-top: 6rem;
  Faites défiler-behavior: lisse;
  Décoration du texte: aucune;
  Color de barre de défilement: var (- colormain) blanc; / * nouvelle ligne * /
}

html :: - webkit-scrollbar {
  Largeur: 10px;
}

html :: - webkit-scrollbar-track {
  Color d'arrière-plan: blanc;
}

html :: - webkit-scrollbar-thumb {
  Contexte: var (- colormain);
}

Résumer:

En supprimant l'affichage: contenu; Propriété, vous pouvez résoudre le problème de l'animation CSS bégayée dans Firefox. Utilisez la propriété Color Scrollbar pour personnaliser le style de barre de défilement du navigateur Firefox. Lorsque vous développez des applications Web, vous devez prêter attention aux différences de mise en œuvre des attributs CSS dans différents navigateurs et adopter des solutions correspondantes pour assurer la meilleure expérience utilisateur.

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!