react-scss：显示带有模糊和变换的 <h1> 的问题，仅在 "EDGE" 上

Question

大家早上好，

我在“EDGE”下有显示问题，如两张照片所示。我尝试在 table 上模拟阴影，在 CHROME 下一切正常，在 EDGE 下只出现一半。我在“React，scss”中编码。

如果你有想法？我试图操纵高度，溢出......但是什么都没有

在边缘 image edge

in CHROME : 没关系 image chrome

代码简单：

    .ombre_table{
    min-height: 5vh;
    width: 100vw;
    margin-bottom: 2vh;

    text-align: center;
    
    transform: rotatex(75deg) rotateY(-2deg);
    font-size: 15vh;
    filter: blur(7px);
    

}

Answer 1

在边缘浏览器中转到 'about:flags' 并启用过滤器属性

Answer 2

在Y轴上大幅度旋转，元素的高度对放置影响不大，所以我大大增加了高度尺寸，并加了一个top negative margin。感谢禹州

.ombre_table{
min-height: 35vh;
width: 100vw;
margin-top: -5vh;

text-align: center;

transform: rotatex(75deg) rotateY(-2deg);
font-size: 15vh;
filter: blur(7px);

}

react-scss：显示带有模糊和变换的 <h1> 的问题，仅在 "EDGE" 上

react-scss : display problem of an <h1> with blur and transform, on "EDGE" only

css

sass

reactjs

microsoft-edge

display