框阴影动画在 Safari 浏览器上存在问题
Posted
技术标签:
【中文标题】框阴影动画在 Safari 浏览器上存在问题【英文标题】：Box shadow animation is bugging on Safari browsers 【发布时间】：2022-01-07 02:28:13 【问题描述】：我的网站上有简单的箱形阴影动画（在 Elementor、WordPress 中构建）。该动画在 Chrome 上运行得非常好，但在 Safari 上，它会创建这个奇怪的方形动画（适用于移动设备和笔记本电脑）：
这是我用来创建 Box Shadow 动画的 CSS。你能告诉我我做错了什么吗？
谢谢！
.hero_button_homepage svg
border-radius: 150px!important;
animation: pulse-orange 2s infinite!important;
width:60px;
height:60px;
border-color: red;
@keyframes pulse-orange
0%
box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
-webkit-box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
-moz-box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
70%
box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
-webkit-box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
-moz-box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
@-webkit-keyframes pulse-orange
0%
box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
-webkit-box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
-moz-box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
70%
box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
-webkit-box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
-moz-box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
@-moz-keyframes pulse-orange
0%
box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
-webkit-box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
-moz-box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
70%
box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
-webkit-box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
-moz-box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
@-o-keyframes pulse-orange
0%
box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
-webkit-box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
-moz-box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
70%
box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
-webkit-box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
-moz-box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
<div class="hero_button_homepage">
<div class="elementor-widget-container">
<div class="elementor-icon-box-wrapper">
<div class="elementor-icon-box-icon">
<a class="" href="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86 86" fill="none"><path d="M57.5 43.866L38 55.1244C37.3333 55.5093 36.5 55.0281 36.5 54.2583L36.5 31.7417C36.5 30.9719 37.3333 30.4907 38 30.8756L57.5 42.134C58.1667 42.5189 58.1667 43.4811 57.5 43.866Z" stroke="#F9F6F1" stroke-></path><circle cx="43" cy="43" r="42" stroke="#F9AC66" stroke- stroke-linecap="round"></circle></svg> </a>
</div>
<div class="elementor-icon-box-content">
<h3 class="elementor-icon-box-title">
<a href=""> Watch the full video</a>
</h3>
</div>
</div>
</div>
</div>【问题讨论】：
【参考方案1】：将您的 svg 包装在一个包装器中并将您的动画应用到该包装器中。 SVG 上的动画可能很棘手，因为您的路径可以剪切某些东西，以实现其外观。
此外，您的 html 缩进很差，这可能就是为什么您在 svg 下有一个结束 div 标记而没有任何相应的开始标记。您的结束 a 标记一直“隐藏”在 svg 行的末尾。
清理并包装你的 svg，你应该很高兴。
注意：我向您申请了margin: 5rem; .hero_button_homepage，以表明它有效。请记住在执行以下操作之前将其删除。
编辑：
我很确定你应该在动画前面加上 -webkit- 和 -moz- BEFORE 你的 normal 声明：例如：
.foo-bar
-moz-box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
-webkit-box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
您可以查看应该在shouldiprefix.com 上使用哪些前缀
.hero_button_homepage margin: 5rem;
.hero_button_homepage .svg_wrapper
border-radius: 150px!important;
animation: pulse-orange 2s infinite!important;
width:60px;
height:60px;
border-color: red;
.hero_button_homepage svg
border-radius: 150px!important;
animation: pulse-orange 2s infinite!important;
width:60px;
height:60px;
border-color: red;
@keyframes pulse-orange
0%
box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
-webkit-box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
-moz-box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
70%
box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
-webkit-box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
-moz-box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
@-webkit-keyframes pulse-orange
0%
box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
-webkit-box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
-moz-box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
70%
box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
-webkit-box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
-moz-box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
@-moz-keyframes pulse-orange
0%
box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
-webkit-box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
-moz-box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
70%
box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
-webkit-box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
-moz-box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
@-o-keyframes pulse-orange
0%
box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
-webkit-box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
-moz-box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
70%
box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
-webkit-box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
-moz-box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
<div class="hero_button_homepage">
<div class="elementor-widget-container">
<div class="elementor-icon-box-wrapper">
<div class="elementor-icon-box-icon">
<a class="" href="">
<div class="svg_wrapper">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86 86" fill="none"><path d="M57.5 43.866L38 55.1244C37.3333 55.5093 36.5 55.0281 36.5 54.2583L36.5 31.7417C36.5 30.9719 37.3333 30.4907 38 30.8756L57.5 42.134C58.1667 42.5189 58.1667 43.4811 57.5 43.866Z" stroke="#F9F6F1" stroke-></path><circle cx="43" cy="43" r="42" stroke="#F9AC66" stroke- stroke-linecap="round"></circle></svg> </a>
</div>
<div class="elementor-icon-box-content">
<h3 class="elementor-icon-box-title">
<a href=""> Watch the full video</a>
</h3>
</div>
</div>
</div>
</div>【讨论】：
以上是关于框阴影动画在 Safari 浏览器上存在问题的主要内容，如果未能解决你的问题，请参考以下文章
Chrome/Safari：box-shadow 仅在指定边框时出现在文本输入中
为Input输入框添加圆角并去除阴影 去除获得焦点时方角样式