我尝试过将CSS背景过滤器：blur与box shadow属性结合使用，但最终结果似乎无法在Safari中正确呈现
我正在使用macOS 10.15 Catalina和Safari 13.0.2，我还注意到相同的代码片段在Chrome中表现良好
不幸的是，用户在此处发布的：：before和：：after解决方案无法应用于输入字段或内部包含文本的元素
如果你使用Safari，你可以通过查看我第一次遇到这个问题的网站来更好地理解我在说什么：https://cristiandavideconte.github.io/myPersonalWebPage/
我将留下一部分代码，您可以使用来重现此问题：
body {
display:flex;
justify-content:center;
background-image: url("https://wallup.net/wp-content/uploads/2014/10/nature/Sunset_Mountain_And_Lake_Free_Download.jpg");
background-repeat: no-repeat;
background-size: 100% 200%;
}
p {
color: white;
margin:0;
font-size:190%;
}
#presentationCard {
height:60vmin;
width:55vmin;
-webkit-box-shadow:0 0 0.5rem 0 rgba(0,0,0,1);
box-shadow:0 0 0.5rem 0 rgba(0,0,0,1);
overflow-x:hidden;
overflow-y:scroll;
border-radius:5%;
background:rgba(0,0,0,0.3);
-webkit-backdrop-filter:blur(2rem) saturate(130%);
backdrop-filter:blur(2rem) saturate(130%);
-webkit-transform:translate3d(0, calc(50vh - 60vmin / 2), 0);
transform:translate3d(0, calc(50vh - 60vmin / 2), 0);
overscroll-behavior:none;
}
#presentationCard::-webkit-scrollbar {
display:none;
}
#presentationCard p {
margin:calc(0.25 * 17vmin);
backface-visibility:hidden;
}<body>
<div id = "presentationCard">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat nunc lorem, quis commodo elit interdum vitae. Aliquam malesuada erat at dictum pretium. Donec pellentesque sed metus id commodo. Vivamus luctus erat non dui consequat, a tincidunt eros luctus. Vestibulum vel imperdiet risus, congue vehicula massa. Proin non iaculis nisl. Nam iaculis, libero ac accumsan bibendum, augue ante blandit mi, quis ullamcorper lacus metus eget risus. Duis in pretium sem.
Sed suscipit porttitor odio, ac auctor quam. Praesent gravida vulputate tortor id cursus. Nulla imperdiet luctus purus, vel suscipit ante lacinia vitae. Cras in quam dignissim, lacinia diam non, tristique purus. Curabitur sit amet risus a augue gravida accumsan ac vel massa. Nulla semper magna felis, ut malesuada ex semper quis. Suspendisse venenatis interdum turpis eget facilisis. Donec tincidunt, purus pharetra convallis volutpat, ante ex venenatis erat, et ultricies justo magna a tortor. Pellentesque commodo nisi mi, non lobortis velit cursus id. Praesent venenatis, tortor quis gravida gravida, tellus metus consectetur massa, non fermentum nisl massa nec nunc. Etiam sapien tortor, aliquam sed diam non, bibendum pellentesque neque. Curabitur facilisis sapien vel mollis viverra. Phasellus at aliquet eros. Curabitur suscipit, lorem in pellentesque consectetur, quam nulla hendrerit sem, quis congue odio elit vitae nulla. Sed viverra mauris eget elit elementum fringilla.
</p>
</div>
</body>Chrome(右侧(和Safari(左侧(渲染以上代码的比较
Safari渲染的缩放版本
这是一个特定的Safari 13.0(MacOs Catalina和旧版本(错误
BigSur更新已解决此问题。