Маскировка раскрытия текста при прокрутке: как получить путь клипа: inset () работает в IE и Edge - PullRequest
Новая
       48

Маскировка раскрытия текста при прокрутке: как получить путь клипа: inset () работает в IE и Edge

0 голосов
/ 10 ноября 2019

Следующий код CSS не работает в IE и Edge, но отлично работает в Chrome и Safari и на iOS.

Демонстрация доступна здесь: https://new -css-clip-text-reveal-mask.webflow.io /

Любые мысли, как заставить его работать вIE и Edge? 

.text-holder {
clip-path: inset(0px 0px 0px 0px);
-webkit-clip-path: inset(0px 0px 0px 0px);
}

1 Ответ

0 голосов
/ 10 ноября 2019

решили это. Две накапливающиеся проблемы. IE и Edge имеют некоторые проблемы с flexbox (используется для центрирования текстового элемента), а IE + Edge не может обрабатывать clip-path: inset (). Вместо этого я использовал clip: rect ().

Вот код и ручка: https://codepen.io/headstarterz/pen/BaaPKMN

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+ CSS */
.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+ CSS */ 
.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+ CSS */ 
.text-holder {clip: rect(0,auto,auto,0);}
.text {display: block; width: 100%;  text-align: center; vertical-align: middle; padding-top: 50vh;} 
}
...