文本在滚动时显示遮罩:如何获取剪辑路径:inset() 在 IE 和 Edge 上工作
Text reveal masking on scroll: how to get clip-path: inset() work on IE and Edge
以下 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);
}
已解决。两个累积问题。 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;}
}
以下 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);
}
已解决。两个累积问题。 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;}
}