Проблемы с Safari

(Ответов: 2, Просмотров: 205)
  1. Новичок
    • Регистрация: 05.04.2017
    • Сообщений: 28
    • Репутация: 1
    Здравствуйте!

    В данной теме хотел бы обсудить такую проблему:

    У меня есть адаптированная анимация под все браузеры (и как правило адаптированна под Safari), но как раз в Safari анимация не работает. А именно не работает часть @-webkit-keyframes .

    Вот код:

    Код HTML:
    @import url('https://fonts.googleapis.com/css?family=Archivo+Black');
    html,
    body {
      height: 100%;
    }
    body {
      background: black;
      font-family: 'Archivo Black', sans-serif;
    }
    .glitch-wrapper {
      height: 100%;
    
    }
    
    
    
    .glitch {
      color: white;
      transition: 0.5s;
      font-size: 150px;
      text-transform: upercase;
      position: relative;
      display: inline-block;
    }
    .glitch::before,
    .glitch::after {
      content: attr(data-text);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: black;
    }
    .glitch::before {
      left: -2px;
      text-shadow: -2px 0 #49FC00;
      clip: rect(24px, 550px, 90px, 0);
      -webkit-animation: glitch-anim-2 3s infinite linear alternate-reverse;
              animation: glitch-anim-2 3s infinite linear alternate-reverse;
    }
    .glitch::after {
      left: 2;
      text-shadow: -2px 0 #b300fc;
      clip: rect(85px, 550px, 140px, 0);
      -webkit-animation: glitch-anim 2.5s infinite linear alternate-reverse;
              animation: glitch-anim 2.5s infinite linear alternate-reverse;
    }
    
    @-webkit-keyframes glitch-anim {
      0% {
        clip: rect(11px, 9999px, 148px, 0);
      }
      4.16666667% {
        clip: rect(9px, 9999px, 1px, 0);
      }
      8.33333333% {
        clip: rect(44px, 9999px, 30px, 0);
      }
      12.5% {
        clip: rect(45px, 9999px, 110px, 0);
      }
      16.66666667% {
        clip: rect(21px, 9999px, 146px, 0);
      }
      20.83333333% {
        clip: rect(66px, 9999px, 93px, 0);
      }
      25% {
        clip: rect(73px, 9999px, 61px, 0);
      }
      29.16666667% {
        clip: rect(78px, 9999px, 93px, 0);
      }
      33.33333333% {
        clip: rect(47px, 9999px, 100px, 0);
      }
      37.5% {
        clip: rect(2px, 9999px, 119px, 0);
      }
      41.66666667% {
        clip: rect(65px, 9999px, 25px, 0);
      }
      45.83333333% {
        clip: rect(54px, 9999px, 125px, 0);
      }
      50% {
        clip: rect(115px, 9999px, 92px, 0);
      }
      54.16666667% {
        clip: rect(13px, 9999px, 43px, 0);
      }
      58.33333333% {
        clip: rect(14px, 9999px, 113px, 0);
      }
      62.5% {
        clip: rect(117px, 9999px, 74px, 0);
      }
      66.66666667% {
        clip: rect(123px, 9999px, 14px, 0);
      }
      70.83333333% {
        clip: rect(143px, 9999px, 122px, 0);
      }
      75% {
        clip: rect(68px, 9999px, 114px, 0);
      }
      79.16666667% {
        clip: rect(133px, 9999px, 129px, 0);
      }
      83.33333333% {
        clip: rect(40px, 9999px, 96px, 0);
      }
      87.5% {
        clip: rect(150px, 9999px, 110px, 0);
      }
      91.66666667% {
        clip: rect(22px, 9999px, 100px, 0);
      }
      95.83333333% {
        clip: rect(75px, 9999px, 135px, 0);
      }
      100% {
        clip: rect(14px, 9999px, 144px, 0);
      }
    }
    @keyframes glitch-anim {
      0% {
        clip: rect(11px, 9999px, 148px, 0);
      }
      4.16666667% {
        clip: rect(9px, 9999px, 1px, 0);
      }
      8.33333333% {
        clip: rect(44px, 9999px, 30px, 0);
      }
      12.5% {
        clip: rect(45px, 9999px, 110px, 0);
      }
      16.66666667% {
        clip: rect(21px, 9999px, 146px, 0);
      }
      20.83333333% {
        clip: rect(66px, 9999px, 93px, 0);
      }
      25% {
        clip: rect(73px, 9999px, 61px, 0);
      }
      29.16666667% {
        clip: rect(78px, 9999px, 93px, 0);
      }
      33.33333333% {
        clip: rect(47px, 9999px, 100px, 0);
      }
      37.5% {
        clip: rect(2px, 9999px, 119px, 0);
      }
      41.66666667% {
        clip: rect(65px, 9999px, 25px, 0);
      }
      45.83333333% {
        clip: rect(54px, 9999px, 125px, 0);
      }
      50% {
        clip: rect(115px, 9999px, 92px, 0);
      }
      54.16666667% {
        clip: rect(13px, 9999px, 43px, 0);
      }
      58.33333333% {
        clip: rect(14px, 9999px, 113px, 0);
      }
      62.5% {
        clip: rect(117px, 9999px, 74px, 0);
      }
      66.66666667% {
        clip: rect(123px, 9999px, 14px, 0);
      }
      70.83333333% {
        clip: rect(143px, 9999px, 122px, 0);
      }
      75% {
        clip: rect(68px, 9999px, 114px, 0);
      }
      79.16666667% {
        clip: rect(133px, 9999px, 129px, 0);
      }
      83.33333333% {
        clip: rect(40px, 9999px, 96px, 0);
      }
      87.5% {
        clip: rect(150px, 9999px, 110px, 0);
      }
      91.66666667% {
        clip: rect(22px, 9999px, 100px, 0);
      }
      95.83333333% {
        clip: rect(75px, 9999px, 135px, 0);
      }
      100% {
        clip: rect(14px, 9999px, 144px, 0);
      }
    }
    @-webkit-keyframes glitch-anim-2 {
      6.66666667% {
        clip: rect(2px, 9999px, 59px, 0);
      }
      10% {
        clip: rect(45px, 9999px, 58px, 0);
      }
      13.33333333% {
        clip: rect(26px, 9999px, 88px, 0);
      }
      16.66666667% {
        clip: rect(124px, 9999px, 79px, 0);
      }
      20% {
        clip: rect(47px, 9999px, 36px, 0);
      }
      23.33333333% {
        clip: rect(140px, 9999px, 120px, 0);
      }
      26.66666667% {
        clip: rect(5px, 9999px, 148px, 0);
      }
      30% {
        clip: rect(150px, 9999px, 29px, 0);
      }
      33.33333333% {
        clip: rect(15px, 9999px, 52px, 0);
      }
      36.66666667% {
        clip: rect(41px, 9999px, 117px, 0);
      }
      40% {
        clip: rect(131px, 9999px, 82px, 0);
      }
      43.33333333% {
        clip: rect(78px, 9999px, 14px, 0);
      }
      46.66666667% {
        clip: rect(59px, 9999px, 148px, 0);
      }
      50% {
        clip: rect(145px, 9999px, 24px, 0);
      }
      53.33333333% {
        clip: rect(66px, 9999px, 13px, 0);
      }
      56.66666667% {
        clip: rect(71px, 9999px, 101px, 0);
      }
      60% {
        clip: rect(124px, 9999px, 138px, 0);
      }
      63.33333333% {
        clip: rect(11px, 9999px, 76px, 0);
      }
      66.66666667% {
        clip: rect(115px, 9999px, 29px, 0);
      }
      70% {
        clip: rect(7px, 9999px, 4px, 0);
      }
      73.33333333% {
        clip: rect(79px, 9999px, 14px, 0);
      }
      76.66666667% {
        clip: rect(29px, 9999px, 17px, 0);
      }
      80% {
        clip: rect(68px, 9999px, 72px, 0);
      }
      83.33333333% {
        clip: rect(6px, 9999px, 123px, 0);
      }
      86.66666667% {
        clip: rect(13px, 9999px, 134px, 0);
      }
      90% {
        clip: rect(46px, 9999px, 23px, 0);
      }
      93.33333333% {
        clip: rect(142px, 9999px, 127px, 0);
      }
      96.66666667% {
        clip: rect(125px, 9999px, 49px, 0);
      }
      100% {
        clip: rect(75px, 9999px, 9px, 0);
      }
    }
    @keyframes glitch-anim-2 {
      6.66666667% {
        clip: rect(2px, 9999px, 59px, 0);
      }
      10% {
        clip: rect(45px, 9999px, 58px, 0);
      }
      13.33333333% {
        clip: rect(26px, 9999px, 88px, 0);
      }
      16.66666667% {
        clip: rect(124px, 9999px, 79px, 0);
      }
      20% {
        clip: rect(47px, 9999px, 36px, 0);
      }
      23.33333333% {
        clip: rect(140px, 9999px, 120px, 0);
      }
      26.66666667% {
        clip: rect(5px, 9999px, 148px, 0);
      }
      30% {
        clip: rect(150px, 9999px, 29px, 0);
      }
      33.33333333% {
        clip: rect(15px, 9999px, 52px, 0);
      }
      36.66666667% {
        clip: rect(41px, 9999px, 117px, 0);
      }
      40% {
        clip: rect(131px, 9999px, 82px, 0);
      }
      43.33333333% {
        clip: rect(78px, 9999px, 14px, 0);
      }
      46.66666667% {
        clip: rect(59px, 9999px, 148px, 0);
      }
      50% {
        clip: rect(145px, 9999px, 24px, 0);
      }
      53.33333333% {
        clip: rect(66px, 9999px, 13px, 0);
      }
      56.66666667% {
        clip: rect(71px, 9999px, 101px, 0);
      }
      60% {
        clip: rect(124px, 9999px, 138px, 0);
      }
      63.33333333% {
        clip: rect(11px, 9999px, 76px, 0);
      }
      66.66666667% {
        clip: rect(115px, 9999px, 29px, 0);
      }
      70% {
        clip: rect(7px, 9999px, 4px, 0);
      }
      73.33333333% {
        clip: rect(79px, 9999px, 14px, 0);
      }
      76.66666667% {
        clip: rect(29px, 9999px, 17px, 0);
      }
      80% {
        clip: rect(68px, 9999px, 72px, 0);
      }
      83.33333333% {
        clip: rect(6px, 9999px, 123px, 0);
      }
      86.66666667% {
        clip: rect(13px, 9999px, 134px, 0);
      }
      90% {
        clip: rect(46px, 9999px, 23px, 0);
      }
      93.33333333% {
        clip: rect(142px, 9999px, 127px, 0);
      }
      96.66666667% {
        clip: rect(125px, 9999px, 49px, 0);
      }
      100% {
        clip: rect(75px, 9999px, 9px, 0);
      }
    }
    Может кто подскажет в чём кроется проблема и как её решить?
    • 0
  2. Опытный Аватар для Vlad03
    • Регистрация: 21.05.2014
    • Сообщений: 364
    • Репутация: 32
    • Webmoney BL: ?
    Biotoxsin, проблема в том, что твой css нафиг не кому не впал, если хочешь, что бы ответили люди у которых есть safari приводи линк на проблему.
    • 0
  3. Новичок
    • Регистрация: 05.04.2017
    • Сообщений: 28
    • Репутация: 1
    Vlad03, Прошу прощения, но я не понимаю о чём идёт речь?! У меня есть Safari и проблема в том что этот браузер не хочет воспроизводить код анимации начиная с @-webkit-keyframes . Вот и спрашиваю может у кого была подобная проблема?!
    • 0

Тэги топика:

Похожие темы

Темы Раздел Ответов Последний пост
Отображение портала на iPad mini, safari
Обсуждение форума и ваши предложения 0 08.03.2014 04:00

У кого попросить инвайт?

Вы можете попросить инвайт у любого модератора:

Информеры