Анимация в браузере Microsoft Edge

237
07 июля 2019, 07:40

У меня есть анимация, и она работает четко во всех браузерах, но когда я открываю страницу через Microsoft Edge, моя анимация не работает, и я не вижу свои изображения. Пока сменяются 2 изображения первое текстовое поле имеет тень box-shadow, после переключения на другое изображение второе текстовое поле имеет тень box-shadow и т.д со всеми блоками текстов. Что не так с моим кодом? 

.div-wrap { 
  display: flex; 
  align-items: center; 
  flex-flow: column nowrap; 
  justify-content: space-between; 
  text-align: center; 
} 
 
:root { 
  --time: 24; 
} 
 
.div-txt img, 
.div-txt-max img { 
  width: 36px; 
  height: 36px; 
} 
 
.div-txt, 
.div-txt-max { 
  height: 180px; 
  padding-top: 20px; 
} 
 
.div-txt p.label, 
.div-txt-max p.label { 
  margin-top: 5px; 
  margin-bottom: 5px; 
  font-family: 'Cabin', sans-serif; 
  font-weight: 400; 
  font-size: 1.1rem; 
  color: #1F2533; 
} 
 
.div-wrap-txt { 
  margin-bottom: 70px; 
  width: 350px; 
} 
 
.div-wrap-txt:nth-child(1) .div-txt:nth-child(1), 
.div-txt-max:nth-child(1) { 
  animation-delay: 0s; 
} 
 
.div-wrap-txt:nth-child(1) .div-txt:nth-child(2), 
.div-txt-max:nth-child(2) { 
  animation-delay: calc(var(--time) / 4 * 1s); 
} 
 
.div-wrap-txt:nth-child(3) .div-txt:nth-child(1), 
.div-txt-max:nth-child(3) { 
  animation-delay: calc(var(--time) / 2 * 1s); 
} 
 
.div-wrap-txt:nth-child(3) .div-txt:nth-child(2), 
.div-txt-max:nth-child(4) { 
  animation-delay: calc(var(--time) / 1.33 * 1s); 
} 
 
.div-img { 
  position: relative; 
  height: 600px; 
  width: 450px; 
  /*  border: 2px solid #ccc;*/ 
  /* background: radial-gradient(ellipse at center, rgba(153, 153, 153, 1) 0%, rgba(0, 0, 0, 1) 100%); 
  */ 
} 
 
.div-img img { 
  position: absolute; 
  top: 0; 
  left: 50%; 
  display: block; 
  transform: translateX(-50%); 
  opacity: 0; 
  animation-duration: calc(var(--time) * 1s); 
  animation-iteration-count: infinite; 
  animation-name: fade; 
} 
 
.div-img img:nth-child(1) { 
  animation-delay: 0s; 
} 
 
.div-img img:nth-child(2) { 
  animation-delay: calc(var(--time) / 8 * 1s); 
} 
 
.div-img img:nth-child(3) { 
  animation-delay: calc(var(--time) / 4 * 1s); 
} 
 
.div-img img:nth-child(4) { 
  animation-delay: calc(var(--time) / 2.66 * 1s); 
} 
 
.div-img img:nth-child(5) { 
  animation-delay: calc(var(--time) / 2 * 1s); 
} 
 
.div-img img:nth-child(6) { 
  animation-delay: calc(var(--time) / 1.6 * 1s); 
} 
 
.div-img img:nth-child(7) { 
  animation-delay: calc(var(--time) / 1.33 * 1s); 
} 
 
.div-img img:nth-child(8) { 
  animation-delay: calc(var(--time) / 1.14 * 1s); 
} 
 
.div-txt { 
  animation-duration: calc(var(--time) * 1s); 
  animation-iteration-count: infinite; 
  animation-name: color-change; 
  text-align: right; 
} 
 
@keyframes color-change { 
  0%, 
  25%, 
  100% { 
    background-color: #fff; 
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.1); 
  } 
  1%, 
  24% { 
    box-shadow: 0 10px 90px rgba(0, 0, 0, 0.4); 
  } 
} 
 
.div-txt-max { 
  position: absolute; 
  left: 0; 
  right: 0; 
  opacity: 0; 
  animation-duration: calc(var(--time) * 1s); 
  animation-iteration-count: infinite; 
  animation-name: block-change; 
} 
 
@keyframes block-change { 
  0%, 
  40%, 
  100% { 
    opacity: 0; 
    z-index: auto; 
  } 
  1%, 
  99% { 
    z-index: 1; 
  } 
  12%, 
  18% { 
    opacity: 1; 
  } 
} 
 
@keyframes fade { 
  0%, 
  20%, 
  100% { 
    opacity: 0; 
    z-index: auto; 
  } 
  1%, 
  99% { 
    z-index: 1; 
  } 
  8%, 
  12% { 
    opacity: 1; 
  } 
} 
 
@media all and (max-width: 1170px) { 
  .widthmax1700 { 
    display: block!important; 
  } 
  .width1700 { 
    display: none; 
  } 
} 
 
@media all and (min-width: 1170px) { 
  .div-wrap { 
    flex-flow: row nowrap; 
    justify-content: space-around; 
  } 
} 
 
@media all and (max-width: 1024px) { 
  .div-img { 
    max-width: 100%; 
    height: 400px; 
  } 
  .div-img img { 
    margin-top: 15px; 
  } 
}
<div class="widthmax1700" style="display: none;"> 
  <div class="div-wrap"> 
    <div class="div-wrap-txt"> 
      <div class="div-txt-max"> 
        <p class="label">Connect</p> 
        <p style="color: #414141;">Wear Lia device, turn it on<br>and connect mobile application <br>with the device.</p> 
      </div> 
      <div class="div-txt-max"> 
        <p class="label">Calibrate</p> 
        <p style="color: #414141;">After connection calibrate the way <br> you would like your posture be upright and slouch positions.</p> 
      </div> 
      <div class="div-txt-max"> 
        <p class="label">Text</p> 
        <p style="color: #6B7684;">Text Text Text, Text Text Text <br> Text Text Text Text <br>Text Text.</p> 
      </div> 
      <div class="div-txt-max"> 
        <p class="label">Text</p> 
        <p style="color: #6B7684;">Text Text Text, Text Text Text <br> Text Text Text Text <br>Text Text.</p> 
      </div> 
    </div> 
    <div class="div-img" style="margin-top: 100px;"> 
      <img src="http://via.placeholder.com/250x250/ff00ff/?text=foto-1"> 
      <img src="http://via.placeholder.com/250x250/ff00ff/?text=foto-2"> 
      <img src="http://via.placeholder.com/250x250/ff00ff/?text=foto-3"> 
      <img src="http://via.placeholder.com/250x250/ff00ff/?text=foto-4"> 
      <img src="http://via.placeholder.com/250x250/ff00ff/?text=foto-5"> 
      <img src="http://via.placeholder.com/250x250/ff00ff/?text=foto-6"> 
      <img src="http://via.placeholder.com/250x250/ff00ff/?text=foto-7"> 
      <img src="http://via.placeholder.com/250x250/ff00ff/?text=foto-8"> 
    </div> 
  </div> 
</div> 
<div class="width1700"> 
  <div class="div-wrap"> 
    <div class="div-wrap-txt"> 
      <div class="div-txt" style="padding-right: 35px;"> 
        <p class="label">Text</p> 
        <p style="color: #6B7684;">Text Text Text, Text Text Text <br> Text Text Text Text <br>Text Text.</p> 
      </div> 
      <div class="div-txt" style="padding-right: 35px; margin-top: 50px;"> 
        <p class="label">Text</p> 
        <p style="color: #6B7684;">Text Text Text, Text Text Text <br> Text Text Text Text <br>Text Text.</p> 
      </div> 
    </div> 
 
    <div class="div-img"> 
      <img src="http://via.placeholder.com/250x250/00ddcf/?text=foto-1"> 
      <img src="http://via.placeholder.com/250x250/00ddcf/?text=foto-2"> 
      <img src="http://via.placeholder.com/250x250/00ddcf/?text=foto-3"> 
      <img src="http://via.placeholder.com/250x250/00ddcf/?text=foto-4"> 
      <img src="http://via.placeholder.com/250x250/00ddcf/?text=foto-5"> 
      <img src="http://via.placeholder.com/250x250/00ddcf/?text=foto-6"> 
      <img src="http://via.placeholder.com/250x250/00ddcf/?text=foto-7"> 
      <img src="http://via.placeholder.com/250x250/00ddcf/?text=foto-8"> 
    </div> 
    <div class="div-wrap-txt"> 
      <div class="div-txt" style="text-align: left; padding-left: 25px;"> 
        <p class="label">Text</p> 
        <p style="color: #6B7684;">Text Text Text, Text Text Text <br> Text Text Text Text <br>Text Text.</p> 
      </div> 
      <div class="div-txt" style="text-align: left; padding-left: 25px; margin-top: 50px;"> 
        <p class="label">Text</p> 
        <p style="color: #6B7684;">Text Text Text, Text Text Text <br> Text Text Text Text <br>Text Text.</p> 
      </div> 
    </div> 
  </div> 
</div>

Я не знаю в чем проблема, в коде или в чем-то другом. Во всех браузерах норм работает все, а в Edge изображений вообще не видно вместо них иконка и блоки не переключаются, т.е не имею тень через каждые 4 секунды. Как это решить? Может сталкивался кто-нибудь, помогите пожалуйста.

Answer 1

Господа, тут в процессе глубокого анализа выяснилось. ))))))

EDGE - это горе-браузер и не любит calc() в анимации.

В первом примере я постарался как мог, доказать, что я прав...

А еще выяснилось, что EDGE не любит var() переменные внутри @keyframes.

Но тут есть одно большое "НО". Все это может иметь разницу из-за сборки. Так что прошу коллег проверить ответ в своих браузерах EDGE и дать знать, Будет ли данный пример работать в какой-нибудь сборке. И если есть разница, отредактируйте ответ.

:root { 
  --time: 5; 
  --times: 5s; 
  --left: 300px; 
} 
 
html, 
body { 
  width: 100%; 
  height: 100%; 
  background-color: grey; 
} 
 
div { 
  width: 100px; 
  height: 20px; 
  background-color: orange; 
  color: white; 
  font-size: 15px; 
  text-align: center; 
  line-height: 1 
} 
 
@keyframes opacity-1 { 
  from { 
    opacity: 0; 
  } 
  50% { 
    opacity: 1; 
  } 
  to { 
    opacity: 0; 
  } 
} 
 
@keyframes opacity-2 { 
  from { 
    opacity: 0; 
  } 
  50% { 
    opacity: 1; 
  } 
  to { 
    opacity: 0; 
  } 
} 
 
@keyframes opacity-3 { 
  from { 
    opacity: 0; 
  } 
  50% { 
    opacity: 1; 
  } 
  to { 
    opacity: 0; 
  } 
} 
 
@keyframes left-1 { 
  from { 
    left: 0; 
  } 
  50% { 
    left: calc(500px - 100px); 
  } 
  to { 
    left: 0; 
  } 
} 
 
@keyframes left-2 { 
  from { 
    left: 0; 
  } 
  50% { 
    left: var(--left); 
  } 
  to { 
    left: 0; 
  } 
} 
 
.div-1 { 
  animation: opacity-1 5s infinite; 
} 
 
.div-2 { 
  animation: opacity-2 calc(8 / 2 * 1s) infinite; 
} 
 
.div-3 { 
  animation: opacity-3 var(--times) infinite; 
} 
 
.div-4 { 
  animation: left-1 5s infinite; 
  position: relative; 
} 
 
.div-5 { 
  animation: left-2 10s infinite; 
  position: relative; 
} 
 
.div-6 { 
  position: relative; 
  left: var(--left); 
} 
 
.div-7 { 
  position: relative; 
  left: calc(500px - 100px) 
}
<div class="div-1">div-1</div> 
<div class="div-2">div-2</div> 
<div class="div-3">div-3</div> 
<div class="div-4">div-4</div> 
<div class="div-5">div-5</div> 
<div class="div-6">div-6</div> 
<div class="div-7">div-7</div>

Решением, для данного ответа, будет смена функции calc() на статичные цифры

.div-wrap { 
  display: flex; 
  align-items: center; 
  flex-flow: column nowrap; 
  justify-content: space-between; 
  text-align: center; 
} 
 
.div-txt img, 
.div-txt-max img { 
  width: 36px; 
  height: 36px; 
} 
 
.div-txt, 
.div-txt-max { 
  height: 180px; 
  padding-top: 20px; 
} 
 
.div-txt p.label, 
.div-txt-max p.label { 
  margin-top: 5px; 
  margin-bottom: 5px; 
  font-family: 'Cabin', sans-serif; 
  font-weight: 400; 
  font-size: 1.1rem; 
  color: #1F2533; 
} 
 
.div-wrap-txt { 
  margin-bottom: 70px; 
  width: 350px; 
} 
 
.div-wrap-txt:nth-child(1) .div-txt:nth-child(1), 
.div-txt-max:nth-child(1) { 
  animation-delay: 0s; 
} 
 
.div-wrap-txt:nth-child(1) .div-txt:nth-child(2), 
.div-txt-max:nth-child(2) { 
  animation-delay: 6s; 
} 
 
.div-wrap-txt:nth-child(3) .div-txt:nth-child(1), 
.div-txt-max:nth-child(3) { 
  animation-delay: 12s; 
} 
 
.div-wrap-txt:nth-child(3) .div-txt:nth-child(2), 
.div-txt-max:nth-child(4) { 
  animation-delay: 18s; 
} 
 
.div-img { 
  position: relative; 
  height: 600px; 
  width: 450px; 
  /*  border: 2px solid #ccc;*/ 
  /* background: radial-gradient(ellipse at center, rgba(153, 153, 153, 1) 0%, rgba(0, 0, 0, 1) 100%); 
  */ 
} 
 
.div-img img { 
  position: absolute; 
  top: 0; 
  left: 50%; 
  display: block; 
  transform: translateX(-50%); 
  opacity: 0; 
  animation-duration: 24s; 
  animation-iteration-count: infinite; 
  animation-name: fade; 
} 
 
.div-img img:nth-child(1) { 
  animation-delay: 0s; 
} 
 
.div-img img:nth-child(2) { 
  animation-delay: 3s; 
} 
 
.div-img img:nth-child(3) { 
  animation-delay: 6s); 
} 
 
.div-img img:nth-child(4) { 
  animation-delay: 8.3s; 
} 
 
.div-img img:nth-child(5) { 
  animation-delay: 12s; 
} 
 
.div-img img:nth-child(6) { 
  animation-delay: 14s; 
} 
 
.div-img img:nth-child(7) { 
  animation-delay: 15s; 
} 
 
.div-img img:nth-child(8) { 
  animation-delay: 20s; 
} 
 
.div-txt { 
  animation-duration: 24s; 
  animation-iteration-count: infinite; 
  animation-name: color-change; 
  text-align: right; 
} 
 
@keyframes color-change { 
  0%, 
  25%, 
  100% { 
    background-color: #fff; 
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.1); 
  } 
  1%, 
  24% { 
    box-shadow: 0 10px 90px rgba(0, 0, 0, 0.4); 
  } 
} 
 
.div-txt-max { 
  position: absolute; 
  left: 0; 
  right: 0; 
  opacity: 0; 
  animation-duration: 24s; 
  animation-iteration-count: infinite; 
  animation-name: block-change; 
} 
 
@keyframes block-change { 
  0%, 
  40%, 
  100% { 
    opacity: 0; 
    z-index: auto; 
  } 
  1%, 
  99% { 
    z-index: 1; 
  } 
  12%, 
  18% { 
    opacity: 1; 
  } 
} 
 
@keyframes fade { 
  0%, 
  20%, 
  100% { 
    opacity: 0; 
    z-index: auto; 
  } 
  1%, 
  99% { 
    z-index: 1; 
  } 
  8%, 
  12% { 
    opacity: 1; 
  } 
} 
 
@media all and (max-width: 1170px) { 
  .widthmax1700 { 
    display: block !important; 
  } 
  .width1700 { 
    display: none; 
  } 
} 
 
@media all and (min-width: 1170px) { 
  .div-wrap { 
    flex-flow: row nowrap; 
    justify-content: space-around; 
  } 
} 
 
@media all and (max-width: 1024px) { 
  .div-img { 
    max-width: 100%; 
    height: 400px; 
  } 
  .div-img img { 
    margin-top: 15px; 
  } 
}
<div class="widthmax1700" style="display: none;"> 
  <div class="div-wrap"> 
    <div class="div-wrap-txt"> 
      <div class="div-txt-max"> 
        <p class="label">Connect</p> 
        <p style="color: #414141;">Wear Lia device, turn it on<br>and connect mobile application <br>with the device.</p> 
      </div> 
      <div class="div-txt-max"> 
        <p class="label">Calibrate</p> 
        <p style="color: #414141;">After connection calibrate the way <br> you would like your posture be upright and slouch positions.</p> 
      </div> 
      <div class="div-txt-max"> 
        <p class="label">Text</p> 
        <p style="color: #6B7684;">Text Text Text, Text Text Text <br> Text Text Text Text <br>Text Text.</p> 
      </div> 
      <div class="div-txt-max"> 
        <p class="label">Text</p> 
        <p style="color: #6B7684;">Text Text Text, Text Text Text <br> Text Text Text Text <br>Text Text.</p> 
      </div> 
    </div> 
    <div class="div-img" style="margin-top: 100px;"> 
      <img src="http://via.placeholder.com/250x250/ff00ff/?text=foto-1"> 
      <img src="http://via.placeholder.com/250x250/ff00ff/?text=foto-2"> 
      <img src="http://via.placeholder.com/250x250/ff00ff/?text=foto-3"> 
      <img src="http://via.placeholder.com/250x250/ff00ff/?text=foto-4"> 
      <img src="http://via.placeholder.com/250x250/ff00ff/?text=foto-5"> 
      <img src="http://via.placeholder.com/250x250/ff00ff/?text=foto-6"> 
      <img src="http://via.placeholder.com/250x250/ff00ff/?text=foto-7"> 
      <img src="http://via.placeholder.com/250x250/ff00ff/?text=foto-8"> 
    </div> 
  </div> 
</div> 
<div class="width1700"> 
  <div class="div-wrap"> 
    <div class="div-wrap-txt"> 
      <div class="div-txt" style="padding-right: 35px;"> 
        <p class="label">Text</p> 
        <p style="color: #6B7684;">Text Text Text, Text Text Text <br> Text Text Text Text <br>Text Text.</p> 
      </div> 
      <div class="div-txt" style="padding-right: 35px; margin-top: 50px;"> 
        <p class="label">Text</p> 
        <p style="color: #6B7684;">Text Text Text, Text Text Text <br> Text Text Text Text <br>Text Text.</p> 
      </div> 
    </div> 
 
    <div class="div-img"> 
      <img src="http://via.placeholder.com/250x250/00ddcf/?text=foto-1"> 
      <img src="http://via.placeholder.com/250x250/00ddcf/?text=foto-2"> 
      <img src="http://via.placeholder.com/250x250/00ddcf/?text=foto-3"> 
      <img src="http://via.placeholder.com/250x250/00ddcf/?text=foto-4"> 
      <img src="http://via.placeholder.com/250x250/00ddcf/?text=foto-5"> 
      <img src="http://via.placeholder.com/250x250/00ddcf/?text=foto-6"> 
      <img src="http://via.placeholder.com/250x250/00ddcf/?text=foto-7"> 
      <img src="http://via.placeholder.com/250x250/00ddcf/?text=foto-8"> 
    </div> 
    <div class="div-wrap-txt"> 
      <div class="div-txt" style="text-align: left; padding-left: 25px;"> 
        <p class="label">Text</p> 
        <p style="color: #6B7684;">Text Text Text, Text Text Text <br> Text Text Text Text <br>Text Text.</p> 
      </div> 
      <div class="div-txt" style="text-align: left; padding-left: 25px; margin-top: 50px;"> 
        <p class="label">Text</p> 
        <p style="color: #6B7684;">Text Text Text, Text Text Text <br> Text Text Text Text <br>Text Text.</p> 
      </div> 
    </div> 
  </div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте standart-s.com.ua
ТОП-10
READ ALSO
Неправильный margin в css
HTML

Неправильный margin в css

Возникла проблема при заполнении контейнера в css

 155
Работа с элементом, который вложен в другой
jQuery

Работа с элементом, который вложен в другой

Как работать с элементами, которые находятся внутри другого элемента?

 114
Почему методы доступа {get;set;} с маленькой буквы
c#

Почему методы доступа {get;set;} с маленькой буквы

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

 138
Как проверить пароль в смарт-карте?
c#

Как проверить пароль в смарт-карте?

Есть смарт-картаЯ хочу использовать ее для аутентификации

 154