background-clip: text... bug in IE and old Edge

在 IE 和 Edge 中使用 display:flex 的情況下，

background-clip ( -webkit-background-clip ):text 不會有作用。 拿掉 flexbox 就又能正常顯示…

如下面 codepen 中的範例： 

html,body{
  margin:0;
  padding:0;
}
div{
  background-image:url(https://picsum.photos/1920/600/?random);
  background-size:cover;
  height:100vh;
  
  /*if display flex, background-clip will not working in ie and edge17 */
  /*display:flex;*/
  /*justify-content:center;*/
  /*align-items:center;*/
  
/*   fixed */
  line-height:100vh;
  text-align: center;
  
  font-size:15vw;
  font-weight:700;
  background-clip: text;
  -webkit-background-clip: text;
  color: rgba(0,0,0,.2);
  position:relative;
/*   mix-blend-mode: difference; */
}
div::after{
  content:'';
  position:absolute;
  z-index:-1;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background-size:cover;
  /*style1*/
  /* Not all images are suitable for this gradient. You can change it. */
  background-image:linear-gradient( rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8) ), url('https://picsum.photos/1920/600/?random');
  /*add filter to change style*/
  /*-webkit-filter: grayscale(200%);*/
  /*filter: grayscale(200%);*/
}