Blur + Непрозрачность текстовой анимации делает мигание в браузере Google Chrome

Question

Так что есть небольшая функция для создания текстовой анимации слово за словом, но в конце анимации каждого слова она мигает (как непрозрачность 1-0-1 прыжок в секунду), я попытался исправить это сам и выяснил,этот хром по какой-то причине не любит фильтр: blur (0) (0 или любое меньшее число).Любые советы, чтобы это исправить?Потому что все прекрасно работает в Firefox и 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;
    })
}

Answer 1

Ваш код технически корректен, однако проблема, с которой вы сталкиваетесь, заключается в несогласованности браузеров для правильной реализации новых функций.

Нельзя сказать, что браузеры плохо справляются с этой задачей, но есть только такмного рабочей силы в день, и каждая добавленная функция должна работать на нескольких аппаратных платформах и иметь возможность ломать уже существующие функции.

На моем компьютере ваша анимация отлично работает на Chrome, часто это другое видеодрайверы карт / аппаратные средства, вызывающие такие ошибки

Так что в основном у вас есть 3 варианта.Вы можете открыть отчет об ошибках в chrome и подождать, пока они его исправят.

Вы можете выяснить, какая конфигурация оборудования вызывает сбой браузера, и попросить клиентов не использовать эту конфигурацию.(очевидно, плохая идея).

Или вы должны думать нестандартно и выяснить, что вызывает сбой браузера.Затем подумайте о том, как добиться того же эффекта, не вызывая ошибки.

В вашем примере я бы сделал обоснованное предположение о том, что установка размытия и одновременное изменение непрозрачности слишком сложны для вашего браузера.обрабатывать.

Так что, возможно, вместо того, чтобы добавить оба эффекта к одному и тому же текстовому элементу, вы можете просто добавить анимацию размытия к тексту и поместить белый текст поверх текста.

Оставьте непрозрачность вашего текста равной 1, но постепенно уменьшите белый div с 1 до 0. Затем пользователи увидят текст "fade in", когда div над текстом "исчезает".

Это позволит браузеру не справляться с непрозрачностью и размытостью одного и того же элемента и, возможно, решит вашу проблему.