css - 文本在滚动时显示遮罩：如何获取剪辑路径：inset() 在 IE 和 Edge 上工作

Question

以下 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);
}

标签： cssinternet-explorermicrosoft-edgeclip-path

Answer 1

已经解决了。两个累积问题。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;} 
}