Blur+Opacity text animation makes a blink in Googl

问题:

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;
    })
}

回答1:

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.

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

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.

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.

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.