模糊+不透明文字动画在Google Chrome浏览器中闪烁 [英] Blur+Opacity text animation makes a blink in Google Chrome browser

问题描述

因此，有一个小功能可以逐个单词地创建文字动画，但是在每个单词动画的末尾它都会闪烁(例如不透明度1-0-1跳一秒钟)，我试图自己修复它并弄清楚该chrome由于某种原因不喜欢filter:blur(0)(0或任何低数字). 有解决问题的技巧吗?因为在Firefox和Opera中一切正常.

So there is a little function to create word by word text animation, but in the end of each word animation it blinks(like opacity 1-0-1 jump in a second), i tried to fix it myself and figured out that chrome for some reason doesn't like filter: blur(0) (0 or any low number). Any tips to fix it? Because everything works fine in firefox and opera.

function fadeIn(quoteSpans) {
    Array.prototype.forEach.call(quoteSpans, function(word) {
        let animate = word.animate([{
                opacity: 0,
                filter: "blur(3px)"
            },{
                opacity: 1,
                filter: "blur(0px)"
            }],
            {
                duration: 1000,
                delay: delay,
                fill: 'forwards'
            }
        );
        delay= delay+300;
    })
}

推荐答案

您的代码在技术上是正确的，但是您看到的问题是浏览器不一致，无法正确实现新功能.

Your code is technically correct, however the problem you are seeing is browsers inconsistency to properly implement new features.

这并不是说浏览器做得很糟糕，但是一天中只有这么多的人力，并且添加的每个功能都必须在多个硬件平台上运行，并且有可能破坏已经存在的功能功能.

This isn't really to say browsers do a bad job of this, but there is only so much manpower in a day, and every feature that's added has to be work on multiple hardware platforms and has the possibility of breaking already existing features.

在我的计算机上，您的动画在chrome上效果很好，通常是由于视频卡驱动程序/硬件不同而导致此类错误.

On my computer your animation works just fine on chrome, often it's different video card drivers/hardware that causes errors like this.

因此，基本上，您有3个选择.您可以打开chrome上的错误报告，然后等待他们修复它.

So basically you have 3 options. You can open a bug report on chrome and wait for them to fix it.

您可以找出导致浏览器失败的硬件配置，并要求您的客户端不要使用该配置(显然是个坏主意).

You can figure out what hardware configuration is causing the browser to fail and ask your clients not to use that configuration (obviously a bad idea).

或者您必须在框外思考，找出导致浏览器故障的原因.然后想办法在不触发错误的情况下达到相同的效果.

Or you have to think outside the box and figure out what's causing the browser to fail. Then think of a way to achieve the same effect without triggering the error.

在您的示例中，我会做出有根据的猜测，即同时设置模糊和更改不透明度对于您的浏览器来说实在是太过分了.

In your example I would take an educated guess to say that setting a blur and changing the opacity at the same time is too much for your browser to handle.

因此，也许您可​​以做的而不是将两种效果都添加到同一文本元素上，而是仅将模糊动画放在文本上，并在文本上放置白色div.

So perhaps what you can do instead of adding both effects to the same text element, is only put your blur animation on the text, and put a white div over the text.

将文本的不透明度保持为1，但将白色div从1淡入淡出.然后，用户将看到文本淡入"作为文本淡出"上方的div.

Leave your text opacity at 1, but fade out the white div from 1 to 0. Then users will see the text "fade in" as the div above the text "fades out".

这将防止浏览器不得不处理同一元素上的不透明和模糊，并可能会解决您的问题.

That will prevent the browser from having to deal with opacity and blur on the same element and will probably fix your problem.

这篇关于模糊+不透明文字动画在Google Chrome浏览器中闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！