Corriger le Background-Clip sur les textes multi-lignes
Corriger le Background-Clip sur les textes multi-lignes

Corriger le Background-Clip sur les textes multi-lignes

Sommaire

Présentation

Lorsque l'on utilise les nouvelles fonctionnalités Background Clip dont notamment la propriété "Clip Background to Text", il est possible que des bugs apparaissent sur Safari. Ces bugs ont lieu lorsque la partie du texte (Span) auquel on applique le Background Clip chevauche plusieurs lignes avec la propriété de Display: inline. Solution n°1: Passer le texte en Display: Inline-Block. Cette solution va forcer la Span à se mettre sous le texte normal. Solution n°2: Utiliser la propriété box-decoration-break Cette solution va modifier le comportement de Background Clip & risque de changer l'affichage. "La propriété box-decoration-break définit la façon dont les propriétés background, padding, border, border-image, box-shadow, margin et clip sont appliquées sur un élément lorsque la boîte de celui-ci est fragmentée. La fragmentation apparaît lorsqu'une boîte en ligne s'étend sur plusieurs lignes ou lorsqu'un bloc s'étend sur plus d'une colonne lorsque qu'il est dans conteneur disposé en colonne ou lorsqu'un bloc déclenche un saut de page sur un média imprimé. Chaque « morceau » de l'élément est alors appelé un fragment." (developper.mozilla.org) Deux options intéressantes: box-decoration-break: slice & box-decoration-break: clone En plus de cette propriété, nous allons utiliser Webkit pour venir appliquer cette propriété à Safari en plus de Chrome. Il ne te reste qu'à ajouter le code. Publish & Finish. 🤯

Étapes

  • Donner une .Class à l'élément (Texte, Heading, Span, etc…) pour lequel on applique un clipping background.
  • Copier le custom code
  • Coller le custom code dans la partie "Inside <head> tag" du Custom Code de la Page ou du Projet
  • Remplacer la .Class par la tienne.
  • Sauvegarder & Publier.

Vidéo

Code Nécessaire

<style>
.taClass {
-webkit-box-decoration-break: clone;
} 
</style>

Plus d'informations

image

Apprends à créer un site moderne, dynamique et intègre les meilleurs outils du marché dans Webflow. Rejoins la formation sans attendre & Maitrise Webflow très rapidement.

-20% offert avec le code WIKI20 (valable sur les paiements en 1x et 4x)