为什么我的CSS过滤器过渡应用于Safari的早期？

Question

我正在尝试使用css过渡进行过滤，并在Safari中获得一些奇怪的结果，但在chrome中按预期工作。 我在CSS中设置初始过滤器和转换（下面的工作代码链接）：

transform: translate3d(-50%,-50%,0) scale(1);
filter: blur(0px) contrast(1.1) sepia(0) saturate(1);
transition: transform 1s ease-in-out 1s, filter 1s ease-in-out 1s;

一旦添加了具有不同过滤器属性的类，Safari就会应用过滤器，但是在过渡延迟后跳回到原始状态，并动画添加过滤器的过渡动画。

我在这里重新编写了码头问题。 它在Chrome中运行良好，但在Safari中有奇怪的状态。 我已经尝试将-webkit-前缀添加到不同的css元素及其属性，但也许我错过了一些东西。

任何帮助是极大的赞赏。