Как модификация объекта Lottie в реальном времени не может вызвать всплывающие окна с изображениями в Safari? - PullRequest
Новая
       18

Как модификация объекта Lottie в реальном времени не может вызвать всплывающие окна с изображениями в Safari?

2 голосов
/ 14 июня 2019

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

Чтобы изменить эти цвета в реальном времени, мы используем regex, чтобы выбрать цвета в файле JSON и заменить их на вновь выбранный. Это прекрасно работает и довольно гладко на Chrome. Однако по какой-то причине в Safari это не устраивает и приводит к тому, что объект изображения (единственный в JSON, я подозреваю, было бы больше, если бы все они вели себя одинаково) появлялся и исчезал.

Ниже приведены примеры GIF (недостаточно повторений для публикации):

Хром (рабочий)

Safari (Pop-ins)

Итак, мы используем Lottie с React, и я подумал, что, возможно, можно будет предварительно изменить изменение цвета перед обновлением DOM, но я не нашел много способов изменить порядок выполнения, чтобы получить этот эффект. Я также обнаружил, что раньше был параметр, буквально называемый «prerender», который можно передать как опцию, но, очевидно, он был «1015 *« устаревшим »с 2017 года» .

Я также пробовал разные методы рендеринга (есть 3: HTML, SVG, Canvas), ни один из которых не работал. Ниже приведен текущий список опций, которые мы передаем объекту Lottie. 

const option = {
    renderer: "svg",
    animationData: animationData,
    prerender: true,
    loop: true,
    autoplay: true,
    rendererSettings: {
        preserveAspectRatio: "xMidYMid slice"
    }
};

Я также обнаружил, что изменение чего-либо в состоянии, которое может вызвать повторную визуализацию любой части DOM, с которой связан объект Lottie, также вызовет всплывающее изображение. В настоящее время я думаю, что это может быть просто проблема Lottie и Safari, которая не устранена, без удаления Lottie и использования другого метода для предварительного просмотра приложения в браузере.

Есть мысли, что может быть причиной этого, или есть какие-то решения, чтобы это исправить?

...