Почему на клиенте при входе через Chrome не работает https://animate.css/?

Question

[Darya Shvakh]

Добрый день.
Почему при входе через Chrome и Mazila на animate.cssдемо animate - не отображается?(
Но при входе на том же клиенте через Opera, всё - ОК.
1) При входе в режиме Инкогнито, так-же - не отображается.
2) Консоль в режиме Инкогнито - пуста (но св-ва не отображаются).
3) Переводчик - отключен.
4) Расширения - отключены.
5) Chrome - удален (разумеется и кеш с мусор), и установлен заново.
6) Антивирус - отключен.
7) Пыль с монитора - вытерта.
Что это? Мистика?
Спасибо!
P/S Господа-проголосовавшие, что данный вопрос - простой, может быть вы и опубликуете "простое" решение.

Comments

[Darya Shvakh]

Рустам Байназаров, Добрый день.
Как-то моя не готова, к таким близким отношениям.)
Но за Отзывчивость - Спасибо!

[Rustam Bainazarov]

Darya Shvakh, я тоже, это же шутка, я вообще в аэропорт еду сейчас :))

Вспомнил ваш аналогичный вопрос день назад. И коли те варианты решений не прошли, то тут вариантов нет иных, кроме как Windows переустановить.

[Darya Shvakh]

Рустам Байназаров,
День назад - стояла задача:
1) Собрать - статистику.
2) Выяснить это общее или частное.)
Результат - Общее. Один из ответивших, так-же не может...
Ну с сегодня сопственоговоря уже ищу - Решение.)
Спасибо!
P/S - Удачного Путешествия!)

[hellcaster]

Возможно это через Windows 7 и версии Firefox и Chrome, которые доступны там

[alexalexes]

6) Антивирус - отключен.

А путь ssl сертификатов для этого сайта смотрели, не маячит ли там какой-нибудь корневой сертификат от Касперского?

[Darya Shvakh]

alexalexes? Добрый день.
Я в ssl (и нетолько) - "нул".
Сертификаты текущего пользователя в Виндовс - вижу, а как тут найти именно для этого сайта? Поиска - нет.
Спасибо!

[Darya Shvakh]

muryn.official, Добрый день.
Разбираюсь с вашим вектором.
Спасибо!

[Darya Shvakh]

alexalexes, могу ошибаться но предположу, что если бы проблема была с ssl то в Опере - сайт, так-же не работал бы. Нет?

[Darya Shvakh]

muryn.official, так-же могу ошибаться но в Виндовс нет отдельных настроек для отдельных браузеров (но не в реестре-же)). Через сети можно, но настройки будут одинаковы для всех.

[RAX7]

Darya Shvakh, посмотри что происходит в девтулзах при нажатии на кнопку. Классы у #animationSandbox меняются? попробуй из консоли запустить анимацию testAnim('tada')

[alexalexes]

Darya Shvakh, путь сертификации в Chrome просматривается так:
Клик по "замку" в адресной строке -> Сертификат -> Путь сертификации.
В Firefox:
Клик по "замку" в адресной строке -> "Соединение >" -> Подробнее -> Защита -> Посмотреть сертификат -> Подробности -> Иерархия сертификатов.
Не знаю, проверьте этот момент, мне как-то доводилось видеть "опеку" антивируса в виде подстановки своего сертификата.

[Darya Shvakh]

alexalexes, пишет что действительный

[Darya Shvakh]

RAX7, Добрый день.
1) Да при клике к id #animationSandbox, добавляется класс="bounce animated"
2) При запуске через консоль пишет - undefined
Спасибо!

[RAX7]

Darya Shvakh, на вкладке network файл animate.min.css загружается?

spoiler

[Darya Shvakh]

RAX7, загружается - animate.css не min

Спасибо!

[RAX7]

Darya Shvakh, что вообще никакие css не загружаются? 0_о Поставь галочку "Disable cache" и обнови страницу.

[Darya Shvakh]

RAX7, а с галочкой есть - все:)
1) animate.css
2) animate min.css
3) style.css

[RAX7]

Darya Shvakh, а теперь посмотри содержимое animate.min.css. У меня он весит 56.8KB

[Darya Shvakh]

RAX7, а у меня 4,6 КВ !!!!
Я же говорю - мистика)

Спасибо!

[RAX7]

Darya Shvakh, а что за inject.js в самом низу? У меня включен adblock и такого скрипта на странице нет. Удали расширение adblock, перезапусти браузер. У тебя все css файлы кто то портит, они должны быть больше по размеру. Скорей всего это какой-то не правильный adblock.

[Darya Shvakh]

После удаления, в стандартном режиме (откуда предыдущие скрины):
1) Адблока
2) Chostery
inject.js всё-равно остаётся.(
А вот в Приватном он - отсутствует!!!

Но демо в Приватном - не идёт.(
Спасибо!

[RAX7]

Darya Shvakh, посмотри откуда грузится inject.js, для этого включи показ Remote Address

spoiler

скопирую сам файл inject.js (правой кнопкой по нему -> save as) и выложи его содержимое

[Darya Shvakh]

RAX7, это был Wappalyzer
После его удаления и перезагрузки браузера inject.js пропал и из стандартного режима просмотра.

Но демо всё-равно не идёт.
Спасибо!

[Darya Shvakh]

RAX7, чёт ссылка не активная,)

/* eslint-env browser */

(() => {
  try {
    const detectJs = (chain) => {
      const properties = chain.split('.');

      let value = properties.length ? window : null;

      for (let i = 0; i < properties.length; i++) {
        const property = properties[i];

        if (value && value.hasOwnProperty(property)) {
          value = value[property];
        } else {
          value = null;

          break;
        }
      }

      return typeof value === 'string' || typeof value === 'number' ? value : !!value;
    };

    const onMessage = (event) => {
      if (event.data.id !== 'patterns') {
        return;
      }

      removeEventListener('message', onMessage);

      const patterns = event.data.patterns || {};

      const js = {};

      for (const appName in patterns) {
        if (patterns.hasOwnProperty(appName)) {
          js[appName] = {};

          for (const chain in patterns[appName]) {
            if (patterns[appName].hasOwnProperty(chain)) {
              js[appName][chain] = {};

              for (const index in patterns[appName][chain]) {
                const value = detectJs(chain);

                if (value && patterns[appName][chain].hasOwnProperty(index)) {
                  js[appName][chain][index] = value;
                }
              }
            }
          }
        }
      }

      postMessage({ id: 'js', js }, window.location.href);
    };

    addEventListener('message', onMessage);
  } catch (e) {
    // Fail quietly
  }
})();

Спасибо!

[RAX7]

Darya Shvakh, В общем с размером файлов всё в порядке, у меня просто антивирусник (nod32) фильтрует трафик и отдает файлы не пожатые gzip`ом. Куда копать дальше я не знаю =(
Попробуй нового пользователь создать и заново установить хром. Может чего получиться.

[Darya Shvakh]

RAX7, Вам - Огромное Спасибо!
И это было, очень - познавательно.
Это - Вам.)

[RAX7]

Darya Shvakh, да не за что. Спасибо за вкусняшку (´･ᴗ･ )

Answer 1

[nike4192]

Все работает (Chrome 74, Firefox 66) на Windows 10
Здесь можно узнать про CSS анимации - https://html5book.ru/css3-animation/,
посоветую читать такие сайты как:
- https://learn.javascript.ru
- https://developer.mozilla.org/ru/
потому что animate.css - это просто стили (в которых прописаны анимации) и немного js

function testAnim(x) {
    $('#animationSandbox').removeClass().addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
      $(this).removeClass();
    });
  };

  $(document).ready(function(){
    $('.js--triggerAnimation').click(function(e){
      e.preventDefault();
      var anim = $('.js--animations').val();
      testAnim(anim);
    });

    $('.js--animations').change(function(){
      var anim = $(this).val();
      testAnim(anim);
    });
  });