Страницы

Поиск по вопросам

понедельник, 16 декабря 2019 г.

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

#html #css #microsoft_edge 


У меня есть анимация, и она работает четко во всех браузерах, но когда я открываю
страницу через 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;
  }
}



  

    

      

        
Text

        
Text Text Text, Text Text Text 
 Text Text
Text Text 
Text Text.

      

      

        
Text

        
Text Text Text, Text Text Text 
 Text Text
Text Text 
Text Text.

      

    


    

      
      
      
      
      
      
      
      
    

    

      

        
Text

        
Text Text Text, Text Text Text 
 Text Text
Text Text 
Text Text.

      

      

        
Text

        
Text Text Text, Text Text Text 
 Text Text
Text Text 
Text Text.

      

    

  







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


Ответы

Ответ 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-1


div-2


div-3


div-4


div-5


div-6


div-7





Решением, для данного ответа, будет смена функции 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;
  }
}



  

    

      

        
Text

        
Text Text Text, Text Text Text 
 Text Text
Text Text 
Text Text.

      

      

        
Text

        
Text Text Text, Text Text Text 
 Text Text
Text Text 
Text Text.

      

    


    

      
      
      
      
      
      
      
      
    

    

      

        
Text

        
Text Text Text, Text Text Text 
 Text Text
Text Text 
Text Text.

      

      

        
Text

        
Text Text Text, Text Text Text 
 Text Text
Text Text 
Text Text.

Автор: на
Ярлыки: , ,

Комментариев нет:

Отправить комментарий

Подписаться на: Комментарии к сообщению (Atom)