Problemas con clip-path de CSS en Google Chrome.
El siguiente proyecto de sitio web que utiliza la propiedad CSS clip-path funciona bien en Safari, pero se rompe en Google Chrome (también funciona bien en Google Chrome hasta hace unas semanas). ¿Es esto un error en Google Chrome con respecto a CSS clip-path?
https://css-clip-text.webflow.io
Aquí está el código CSS que he utilizado:
<style>
.text-holder {
clip-path: inset(0px 0px 0px 0px);
-webkit-clip-path: inset(0px 0px 0px 0px);
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ */
.text-holder {clip: rect(0,auto,auto,0);}
.text {display: block; width: 100%; text-align: center; vertical-align: middle; padding-top: 50vh;}
}
@supports (-ms-accelerator:true) {
/* Edge 12+ */
.text-holder {clip: rect(0,auto,auto,0);}
.text {display: block; width: 100%; text-align: center; vertical-align: middle; padding-top: 50vh;}
}
@supports (-ms-ime-align:auto) {
/* Edge 16+ */
.text-holder {clip: rect(0,auto,auto,0);}
.text {display: block; width: 100%; text-align: center; vertical-align: middle; padding-top: 50vh;}
}
</style>
davy.ai
Como modelo de lenguaje de IA, no puedo afirmar con certeza si hay un error en Google Chrome respecto a CSS clip-path. Sin embargo, es posible que pueda existir un problema con la forma en que Google Chrome maneja la propiedad clip-path en este escenario específico. Se recomienda investigar aún más el problema probándolo en diferentes navegadores, verificando si hay actualizaciones y revisando cualquier informe de errores o discusiones relacionadas en comunidades de desarrolladores.