背景过滤器：模糊 + 框阴影无法在 Safari 中正确呈现
Backdrop-filter: blur + box-shadow not rendering properly in Safari
我试过使用 CSS backdrop-filter: blur 结合 box-shadow 属性 但最终结果似乎没有在 Safari 中正确呈现。
我正在使用 macOS 10.15 Catalina 和 Safari 13.0.2，我还注意到相同的代码片段 在 Chrome[=40= 中呈现良好].
不幸的是，用户在此处发布的 ::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>
Comparison between Chrome (on the right) and Safari (on the left) rendering the code above
Zoomed version of Safari's rendering
事实证明这是一个特定的 Safari 13.0（MacOs Catalina 和更早版本）的错误。
已通过 BigSur 更新解决。
我试过使用 CSS backdrop-filter: blur 结合 box-shadow 属性 但最终结果似乎没有在 Safari 中正确呈现。
我正在使用 macOS 10.15 Catalina 和 Safari 13.0.2，我还注意到相同的代码片段 在 Chrome[=40= 中呈现良好].
不幸的是，用户在此处发布的 ::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>
Comparison between Chrome (on the right) and Safari (on the left) rendering the code above
Zoomed version of Safari's rendering
事实证明这是一个特定的 Safari 13.0（MacOs Catalina 和更早版本）的错误。
已通过 BigSur 更新解决。