gpt4 book ai didi

safari - Safari 中过渡期间的不透明度变化闪烁

转载 作者:行者123 更新时间:2023-12-04 23:01:02 29 4
gpt4 key购买 nike

我有一个复合 div(它有 translate3d)和一个 opacity过渡:

#bad {
background-color: red;
-webkit-transition: opacity .5s linear;
-webkit-transform: translate3d(0, 0, 0);
}

如果我改变它的 opacity在转换过程中,它会在 Safari 中闪烁。
闪烁大约每三秒发生一次,类似于白色闪光。

Chrome 中没有这样的问题。

Scroll up and down in this fiddle to see what I mean.

问题似乎不仅限于不透明度—更改 -webkit-transform而它的转变正在进行中也有类似的效果: 元素偶尔会以过渡的最终状态之一呈现。

如果我删除 -webkit-transform,问题就会消失但不幸的是,现在这不是一个选择。
我可以通过其他方式在 Safari 中解决这个问题吗?

最佳答案

问题是需要同时更改属性值和添加动画。

使用 C++ 重写 Core Animation 时,引入了 OSX 10.5 中不存在的竞争条件。当我的附加动画实验产生相同的闪烁时,我了解到了这一点。我发现解决方法是 Core Animation 的 kCAFillModeBackwards。我还发现,通过修改我自己的 WebKit 分支(重点放在修改部分),同样的解决方法对 CSS Transitions 也很有效。但是猜测对 WebKit 开发人员没有帮助,我不想再惹恼他们。我确实认为问题在于核心动画,而不是 WebKit。我猜他们应该在任何给定的 CATransaction 中使用从对 CACurrentMediaTime 的单个调用派生的相同 CFTimeInterval。

与过渡不同,CSS 动画确实允许填充模式。重现过渡行为可能很困难,但这是一种选择。特别是,挑战将用新的动画替换中断的动画,这些动画从上一个停止的地方开始。换句话说,从 0 到 1 或 1 到 0 的不透明度动画很容易,但是如果用户想要在当前动画进度为 0.577564 时开始,会发生什么?这可能需要手动修改 @keyframes 样式规则,这不是一件容易的事。

然后是适当的动画填充模式的问题。通常,您不希望使用前向填充动画来执行布局,您会使用 CSS 属性本身。但在这种情况下,它可能很简单,不设置底层值,而是仅使用前向填充 CSS 动画,该动画被替换但在完成时不会被删除。另一种方法是通过 element.style 设置底层值,同时添加一个向后填充的 CSS 动画。

当然,如果 WebKit 不使用 Core Animation,闪烁也不会发生。到目前为止,在您的情况下防止闪烁的最简单方法是不启用硬件加速。

代替:

-webkit-transform: translate3d(100px, 100px, 0);

尝试:
-webkit-transform: translate(100px, 100px);

http://jsfiddle.net/z6ejt/9/

关于safari - Safari 中过渡期间的不透明度变化闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24465619/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com