理解CSS3 isolation: isolate的表现和作用

Posted 2020-06-08

转自：http://www.zhangxinxu.com/wordpress/?p=5155

只要元素可以创建层叠上下文，就可以阻断mix-blend-mode！

于是，不仅仅是isolation:isolate，下面这些也是可以的：

1. z-index值不为auto的position:relative/position:absolute定位元素。
2. position:fixed，仅限Chrome浏览器，其他浏览器遵循上一条，需要z-index为数值。
3. z-index值不为auto的flex项(父元素display:flex|inline-flex).
4. 元素的opacity值不是1.
5. 元素的transform值不是none.
6. 元素mix-blend-mode值不是normal.
7. 元素的filter值不是none.
8. will-change指定的属性值为上面任意一个。
9. 元素的-webkit-overflow-scrolling设为touch.

眼见为实，您可以狠狠地点击这里：层叠上下文与混合模式阻隔测试demo