Safari sur iOS n'affiche pas le texte lors de l'utilisation de background-clip et de text-fill-color avec quelques pseudo-éléments

J'ai du mal à résoudre ce mystère. J'ai créé un effet "knock-out" et ajouté un séparateur en utilisant: after à h2. Il semble très bien sur tout ce que j'ai testé, sauf pour Safari sur iOS (10.3.2).Safari sur iOS n'affiche pas le texte lors de l'utilisation de background-clip et de text-fill-color avec quelques pseudo-éléments

Link to fiddle avec une solution brisée et temporaire.

h2.gradient { 
    color: #013c65; 
    font-weight: 600; 
    text-transform: uppercase; 
    font-size: 2em; 
    line-height: 1em; 
    background: linear-gradient(1deg, #800909, #332222); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    -moz-background-clip: text; 
    -moz-text-fill-color: transparent; 
    -ms-background-clip: text; 
    -ms-text-fill-color: transparent; 
    background-clip: text; 
    text-fill-color: transparent; 
} 
h2.gradient:after { 
    content: ''; 
    position: relative; 
    display: block; 
    height: .12em; 
    width: 2.5em; 
    background-image: linear-gradient(1deg, #800909, #332222); 
    top: .5em; 
}

On dirait que le problème semble être à la combinaison background-clip: text;, text-fill-color: transparent;, et avec l'élément pseudo: display: block;.

Je suis en mesure de positionner en absolu et d'afficher en bloc le pseudo-élément. Pour l'instant, j'ai enveloppé l'en-tête dans <div class="special-heading"> et ajouté un séparateur après la div.

Y aurait-il une raison pour laquelle iOS n'aime pas cela ou est-ce que quelqu'un d'autre a rencontré des problèmes similaires? J'ai trouvé que l'ajout d'un espace de 0 largeur  le fait fonctionner magiquement.

Je pense que cela pourrait être un bug, cependant, parce que je suis capable de faire fonctionner la méthode originale de temps en temps avec l'inspecteur web ouvert sur mon Mac.

Merci pour votre avis!

Source

2017-07-07 Logan Garcia

J'ai le même problème et les résout le problème pour moi aussi. –

Oui, la propriété du plan de texte comporte des bogues sur de nombreux périphériques. J'ai fait face à un sur un appareil Android (alors que sur beaucoup d'autres appareils Android, il avait travaillé), où j'ai utilisé la même chose sur une étiquette de bouton, ne fonctionnait pas, mais a bien fonctionné sur une balise div. Essayez de changer le tag h2 en div. Si cela fonctionne, alors c'est un bug. –

J'ai fait face à un problème similaire et trouvé une solution alternative dans un fil séparé.

L'idée est de changer la propriété d'affichage en ligne: display: inline. Ne nécessite pas de "hacks HTML".

Bien que ce correctif ne corresponde peut-être pas à vos besoins de mise en page, c'est la seule solution qui me convient du point de vue CSS.

Source

2017-12-14 17:52:32 sergeome

Safari sur iOS n'affiche pas le texte lors de l'utilisation de background-clip et de text-fill-color avec quelques pseudo-éléments

Répondre

Questions connexes