Polyfill (scroll-timeline.js) сбрасывает CSSJavascript

Форум по Javascript
Ответить
Anonymous
 Polyfill (scroll-timeline.js) сбрасывает CSS

Сообщение Anonymous »

На моем веб-сайте (простой php, html, css, js) я использую анимацию на основе прокрутки через js с использованием анимации-временной шкалы, которая не поддерживается в Firefox. Команда Google выпустила файл Scroll-timeline.js (polyfill), но в Firefox это вызывает что-то вроде FOUC. На странице применены все стили, css полностью загружен (main.min.css в сети), а затем в конце вы видите, как входит Scroll-timeline.js и каким-то образом на короткое время сбрасывает CSS, прежде чем загрузить их снова (main.min.css снова появляется в сети, и на этот раз «инициатором» является не таблица стилей, а «scroll-timeline.js»). Это происходит каждый раз, когда вы переходите на другую страницу / F5.
Есть идеи, в чем может быть проблема? Я пробовал удалить все виды js/стилей, даже те, которые используют полифилл, но пока я загружаю полифилл, Firefox делает свое дело.
Вот сеть:
Изображение

А вот моя единственная временная шкала анимации:
$.each($parallaxes, function (i, parallax){
let distance = ($(parallax).attr('data-parallax-distance') != undefined) ? $(parallax).attr('data-parallax-distance') : '600';
let animation = parallax.animate(
{
transform: ['translateY(0)', 'translateY(-'+distance+'px)'],
},
{
fill: 'both',
timeline: new ViewTimeline({
subject: parallax,
}),
rangeStart: 'entry 50%',
rangeEnd: 'cover 95%',
}
);
animations.push(animation);
});


Подробнее здесь: https://stackoverflow.com/questions/798 ... resets-css
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Javascript»