Internet Explorer 11 переход translateY действующий странный

Question

Я пытаюсь переместить элемент сверху вниз, (от 0 до 100vh). Internet Explorer 11 делает странные вещи при переходе свойства transform. Он поднимается, когда он должен опускаться и не соблюдает продолжительность.

JSFIDDLE1

JSFIDDLE2

div{ 
    width:200px; 
    height:200px; 
    background:black; 
    transition:transform 5s; 
    -ms-transition: -ms-transform 5s; 
} 

div:hover{ 
    transform:translateY(100vh); 
    -ms-transform:translateY(100vh); 
} 

Почему это происходит и как я могу решить эту проблему?

Answer 1

Я знаю, что этот вопрос старый, но сегодня я столкнулся с этой проблемой. Я создаю своего рода слайд-шоу, в котором используются переходы CSS для анимации слайдов. Большинство браузеров обрабатывают transform: translateX(-100vw) и transform: translateY(-100vh) для перемещения слайдов влево и вверх соответственно, но IE имеет проблемы с расчетом правильных позиций начала/конца и путается по времени так же, как упоминалось в @ Alvaro.

Решение заключается в использовании абсолютных единиц (например, пикселей), а не относительных. Но, учитывая широкий диапазон размеров экрана, я должен поддерживать, я не могу использовать ни одно значение.

Моя работа заключалась в том, чтобы использовать ряд запросов @media, чтобы определить набор правил перевода, которые всегда гарантируют, что слайд перемещается с экрана, но не заходит слишком далеко. Например:

/* Slide left */ 
@media (max-width: 480px) { 
    .slide.left { 
    transform: translateX(-480px); 
    } 
} 
@media (min-width: 481px) and (max-width: 960px) { 
    .slide.left { 
    transform: translateX(-960px); 
    } 
} 
@media (min-width: 961px) and (max-width: 1920px) { 
    .slide.left { 
    transform: translateX(-1920px); 
    } 
} 
@media (min-width: 1921px) and (max-width: 3840px) { 
    .slide.left { 
    transform: translateX(-3840px); 
    } 
} 
@media (min-width: 3841px) { 
    .slide.left { 
    transform: translateX(-7680px); 
    } 
} 

/* Slide up */ 
@media (max-height: 480px) { 
    .slide.up { 
    transforom: translateX(-480px); 
    } 
} 
/* Etc. */ 

Эти запросы будут поддерживать разрешение вплоть до 8К, хотя и со значительно меньшим зернистости при более высоких разрешениях. Вы хотите настроить их на основе ожидаемого использования.