Safari 中的三角形按钮颜色问题(纯 CSS)

Question

这是我的代码：

button {
margin: 0;
padding: 0;
border-width: 0;
text-decoration: none;
cursor: pointer;
outline: none !important;
width: 0;
height: 0;
float: left;
}
#buttonred {
-webkit-animation: buttonred 2s infinite step-start;
}
@-webkit-keyframes buttonred {
33.333% { 
border-radius: 0%;
background-color: red;
border-left: 0px solid transparent;
border-right: 0px solid transparent;
border-bottom: 0px solid red;
height: 50px;
width: 50px;
}
66.666% {
border-radius: 50%;
background-color: red;
border-left: 0px solid transparent;
border-right: 0px solid transparent;
border-bottom: 0px solid red;
height: 50px;
width: 50px;
}
100% { 
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid red;
background-color: transparent;
background: transparent;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-border-radius:0; 
box-shadow: none;
backface-visibility:hidden;
}
}

<button id="buttonred" class="colorchanger"  value="red"></button>

三角形的颜色应该是"纯"红色。它在Chrome和Firefox中工作正常。但不是在 Safari 中。为什么？如何解决问题？如果单击该按钮，则颜色会在短时间内正确。我已经尝试了很多，但找不到解决方案。

将非常感谢帮助！

Answer 1

解决方案：

#buttonred {
-webkit-animation: buttonred 2s infinite step-start;
border-bottom: 50px solid red;
}

可能是Safari错误或类似的东西。»边框底部：50px 纯红色;"« 在这里是必需的。

爱。