web-dev-qa-db-fra.com

Clip-Path Inset en CSS ne fonctionne pas dans chrome

J'essaie d'utiliser la propriété CSS clip-path , mais j'obtiens un Invalid property value erreur dans Chrome.

screenshot

Voici une petite démo:

.clip-me {  
  clip-path: inset(0px 50px 50px 0px); /* top, right, bottom, left */
}
<img class="clip-me" src="http://i.stack.imgur.com/MnWjF.png" width="100">

Clip Path Example

Remarque : Ceci est différent de cette question sur clip-path ne fonctionne pas avec Chrome , car il demande spécifiquement comment appliquer le chemin du clip en utilisant SVG (pas CSS)

Selon Can I Use, il devrait fonctionner en chrome .

htmlcssclip-path
16
KyleMit

Il s'avère que j'avais juste besoin du -webkit- préfixe (même si je ne le vois pas dans cette liste de préfixes fournisseurs )

.clip-me {           /* top, right, bottom, left */
  -webkit-clip-path: inset(0px 50px 50px 0px); 
          clip-path: inset(0px 50px 50px 0px); 
}
<img class="clip-me" src="http://i.stack.imgur.com/MnWjF.png" width="100">

Mise à jour à partir de Chrome 55 , le chemin du clip sans le préfixe du fournisseur est désormais pris en charge, mais de nombreux autres navigateurs nécessitent toujours l'utilisation de -webkit-clip-path il est donc plus sûr de l'inclure pour l'instant.

Voici un aperçu de CanIUse (à partir de 2017), avec les détails supplémentaires dans le coin supérieur droit des navigateurs de support partiel indiquant souvent la nécessité du -webkit- préfixe

Can I Use Snaptshot

Lectures complémentaires :

29
KyleMit