css - 为什么我的 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 会在添加具有不同过滤器属性的类后立即应用过滤器，但在过渡延迟后会跳回原始状态，并为添加过滤器的过渡设置动画。

我在这里在 codpen 中重现了这个问题。它在 Chrome 中运行良好，但在 Safari 中出现了奇怪的状态跳跃。我尝试将-webkit-前缀添加到不同的 css 元素及其属性，但我可能遗漏了一些东西。

任何帮助是极大的赞赏。

标签： csssafaricss-transitionscss-filters