Анимация/ключевые кадры CSS3, преобразование с помощью vw в проблемах IE11

Я анимирую элемент на экране, но в IE11 происходят странные вещи. Я нахожусь в разработке, поэтому не могу поделиться работающим кодом. Но я создал скрипт, чтобы воспроизвести проблему.

По сути, когда я использую ширину окна просмотра, также известную как vw, с transform:translateX(); внутри @keyframes для использования в анимации, IE11 не отражает ширину viewport в анимации.

Таким образом, Fiddle, который я создал, берет элемент, расположенный в центре viewport:

  1. запускает его на левом краю экрана с появлением половины элемента
  2. перемещается в центр окна просмотра, останавливается
  3. а затем перемещается к правому краю области просмотра, при этом половина элемента находится за пределами экрана.

Скрипт: https://jsfiddle.net/Bushwazi/7xe0wy8z/4/

  • На веб-сайте, над которым я работаю, IE11 анимирует элемент, как если бы страница была в 10 раз шире.
  • В скрипке анимация выполняется в обратном порядке и никогда не доходит до края страницы.

Таким образом, в обоих случаях IE11 не использует правильную ширину для vw внутри анимации CSS.

HTML:

<!--
  The animation on the red block should start half on the screen, pause at the center of the screen and then finish by pausing at the edge of the screen, half of the box off of the screen
-->
<article>
  <p>IE11 weirdness when transforming vw inside keyframes</p>
  <strong><span>BLOCK</span></strong>
</article>

CSS:

* {
  margin: 0;
  padding: 0;
}

@-webkit-keyframes movee {
  0% {
    -webkit-transform: translateX(-50vw);
            transform: translateX(-50vw)
  }
  10% {
    -webkit-transform: translateX(-50vw);
            transform: translateX(-50vw)
  }
  40% {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw)
  }
  60% {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw)
  }
  90% {
    -webkit-transform: translateX(50vw);
            transform: translateX(50vw)
  }
  100% {
    -webkit-transform: translateX(50vw);
            transform: translateX(50vw)
  }
}

@keyframes movee {
  0% {
    -webkit-transform: translateX(-50vw);
            transform: translateX(-50vw)
  }
  10% {
    -webkit-transform: translateX(-50vw);
            transform: translateX(-50vw)
  }
  40% {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw)
  }
  60% {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw)
  }
  90% {
    -webkit-transform: translateX(50vw);
            transform: translateX(50vw)
  }
  100% {
    -webkit-transform: translateX(50vw);
            transform: translateX(50vw)
  }
}

body {
  background-color: #eee;
  background-image: -webkit-linear-gradient(left, black 50%, transparent 50.01%);
  background-image: linear-gradient(90deg, black 50%, transparent 50.01%);
  background-size: 20% 100%;
  background-position: 0 0;
  font-family: sans-serif;
  height: 100vh;
}

article {
  position: relative;
  height: 100%;
  width: 100%;
  display: block;
}

p {
  width: 100%;
  background: #FFF;
  text-align: center;
  padding: 1em 0;
}

strong {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100px;
  width: 100px;
  background: red;
  border: blue solid 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  text-align: center;
  margin: -50px 0 0 -50px;
  -webkit-animation: movee 5.0s linear infinite 0.0s;
          animation: movee 5.0s linear infinite 0.0s;
}

css css-animations internet-explorer viewport-units
person Jason Lydon    schedule 15.08.2016    source источник
comment
У меня та же проблема с IE11 и шириной области просмотра... я начал щедрость, чтобы посмотреть, не сможем ли мы привлечь внимание.   -  person Ben Everard    schedule 09.11.2016

Ответы (2)


arrow_upward
4
arrow_downward

Согласно caniuse:

В IE 10 и 11 использование модулей vw с 3D-преобразованиями приводит к неожиданному поведению.

Хотя 2D- и 3D-преобразования различаются, вполне вероятно, что они обрабатываются аналогичными методами в браузере. Поэтому я бы сказал, что VW/VH/VMAX/VMIN не поддерживаются в IE11 для переходов.

Есть ли причина, по которой вы не хотите использовать % ?

Как это:

* {
  margin: 0;
  padding: 0;
}

@-webkit-keyframes movee {
  0% {
    left: -1%;
  }
  10% {
    left: -1%;
  }
  40% {
   left: 50%;
  }
  60% {
    left: 50%;
  }
  90% {
    left: 101%;
  }
  100% {
   left: 101%;
  }
}

@keyframes movee {
  0% {
    left: -1%;
  }
  10% {
    left: -1%;
  }
  40% {
   left: 50%;
  }
  60% {
    left: 50%;
  }
  90% {
    left: 101%;
  }
  100% {
   left: 101%;
  }
}

body {
  background-color: #eee;
  background-image: -webkit-linear-gradient(left, black 50%, transparent 50.01%);
  background-image: linear-gradient(90deg, black 50%, transparent 50.01%);
  background-size: 20% 100%;
  background-position: 0 0;
  font-family: sans-serif;
  height: 100vh;
}

article {
  border: thin dotted green;
  position: relative;
  height: 100%;
  width: 100%;
  display: block;
}

p {
  width: 100%;
  background: #FFF;
  text-align: center;
  padding: 1em 0;
}

strong {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100px;
  width: 100px;
  background: red;
  border: blue solid 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  text-align: center;
  margin: -50px 0 0 -50px;
  -webkit-animation: movee 5.0s linear infinite 0.0s;
          animation: movee 5.0s linear infinite 0.0s;
}
<!--
  The animation on the red block should start half on the screen, pause at the center of the screen and then finish by pausing at the edge of the screen, half of the box off of the screen
-->
<article>
  <p>IE11 weirdness when transforming vw inside keyframes</p>
  <strong><span>BLOCK</span></strong>
</article>

person asimovwasright    schedule 09.11.2016
comment
percentage в translateX() берется из анимируемого элемента, а не из родителя. Поскольку он проходит через всю область просмотра, vw имеют смысл. - person Jason Lydon; 09.11.2016
comment
+1 к комментарию @JasonLydon. Кроме того, использование left не является свойством, которое может отображаться на графическом процессоре, и поэтому может вызвать проблемы с производительностью. - person Ben Everard; 09.11.2016
comment
Однако в этом случае работает %, а vw — нет. Разве код примера не сопоставим с реальным кодом? @BenEverard - насколько я понимаю, 2D-переводы в любом случае не ускоряются аппаратно. - person asimovwasright; 09.11.2016

arrow_upward
1
arrow_downward

Одной из возможностей было бы использовать преобразование в процентах.

Поскольку вы хотите, чтобы размер преобразования был равен 100vw, давайте установим дополнительный элемент шириной 100vw. Теперь преобразование этого элемента составляет всего 100%.

Мне пришлось использовать отрицательные смещения, чтобы избежать появления нежелательной горизонтальной полосы прокрутки.

* {
  margin: 0;
  padding: 0;
}

@keyframes movee {
  0% {
            transform: translateX(-100%)
  }
  10% {
            transform: translateX(-100%)
  }
  40% {
            transform: translateX(-50%)
  }
  60% {
            transform: translateX(-50%)
  }
  90% {
            transform: translateX(0%)
  }
  100% {
            transform: translateX(0%)
  }
}

body {
  background-color: #eee;
  background-image: linear-gradient(90deg, black 50%, transparent 50.01%);
  background-size: 20% 100%;
  background-position: 0 0;
  height: 100vh;
}

article {
  position: relative;
  height: 100%;
  width: 100%;
  display: block;
}

p {
  width: 100%;
  background: #FFF;
  text-align: center;
  padding: 1em 0;
}

.base {
  width: 100vw;
  animation: movee 5.0s linear infinite 0.0s;
    top: 50%;
    position: absolute;
    height: 100px;
}
strong {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100px;
  width: 100px;
  background: red;
  border: blue solid 3px;
  position: absolute;
  right: 0px;
  top: 0px;
  box-sizing: border-box;
  text-align: center;
  margin: -50px 0 0 -50px;
}
<article>
  <p>IE11 weirdness when transforming vw inside keyframes</p>
  <div class="base">
    <strong><span>BLOCK</span></strong>
  </div>
</article>

person vals    schedule 13.11.2016