Que se passe-t-il dans Safari avec la couleur transparente?

Question

Il y a un bloc dans lequel le texte est plus proche de la fin disparaît progressivement. Ceci est fait en utilisant le ::after, qui est donné linear-gradient de la couleur transparente à la couleur de fond. Récemment remarqué que dans les versions actuelles des navigateurs, tout va bien, partout sauf safari (et dans le 11, tant pis). Autoprefix pas solution (il est ici et pas nécessaire).

Mon code:

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    display: flex; 
 
    min-height: 100vh; 
 
} 
 

 
p { 
 
    margin: auto; 
 
    width: 40vw; 
 
    height: 40vh; 
 
    max-width: 300px; 
 
    max-height: 300px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
p::after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 50%; 
 
    background-image: linear-gradient(transparent 0, white 100%); 
 
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel urna efficitur, tempor felis eu, lacinia sem. Nulla lacinia tincidunt turpis, faucibus luctus leo. Mauris lobortis orci lacus, vel luctus leo venenatis ac. Phasellus feugiat urna sit 
 
    amet nisi dapibus, a dignissim nibh dignissim. Suspendisse vel tempor nisl. Pellentesque hendrerit, nibh non vehicula finibus, turpis tellus auctor purus, ac placerat magna elit vel mauris. Nullam viverra venenatis enim. Vivamus odio lectus, maximus 
 
    quis dolor et, lobortis ullamcorper velit. Nulla fringilla ligula a metus faucibus commodo non ac lectus. Aenean bibendum arcu eu nibh convallis ornare.</p>

décide de remplacer transparent avec rgba(255,255,255,0). Mais c'est un comportement anormal, et une béquille à mon avis.

Des idées?

Answer 1

Je ne connais aucun des inconvénients d'utiliser RGBA(255, 255, 255, 0) et si cela fonctionne pour vous, je pense que vous devriez l'utiliser. C'est la meilleure méthode, car elle ne dépend pas du navigateur pour déterminer quelle est la couleur avec 0 opacité comme le fait le mot-clé transparent.

Le problème, que vous rencontrez, est dû au fait que la dernière version de Safari pense que la couleur entend par transparent est gray et les autres grands navigateurs pensent qu'il est, dans votre cas, white - le même que la couleur de fond de l'élément.

Pour éviter un comportement inattendu, tel que dans les dégradés, la spécification W3C actuelle indique que le transparent doit être calculé dans l'espace colorimétrique alpha-premultiplied. Cependant, sachez que certains navigateurs plus anciens peuvent le traiter en noir avec une valeur alpha de 0 et apparemment la dernière version de Safari fait quelque chose de similaire.

Pour répondre à un commentaire de l'OP:

Il n'y a pas une telle chose de transparence incolore et l'exemple avec des gradients montre parfaitement.

Par exemple, Web Docs de MDN Mozilla dit:

Le mot-clé transparent représente une couleur totalement transparente. Ce rend l'arrière-plan complètement visible. Techniquement, transparent est un raccourci pour rgba (0,0,0,0).

Le mot-clé représente une couleur, bien qu'une Pleinement transparente, mais encore une couleur.