css cubic-bezier ведет себя по-разному в IE11 и Edge vs. Chrome

Question

У меня есть следующее правило CSS:

div {
    width:10%; background:black;
    transition: width 2s cubic-bezier(.15,.88,0,.99);
    -o-transition: width 2s cubic-bezier(.15,.88,0,.99);
    -ms-transition: width 2s cubic-bezier(.15,.88,0,.99);
    -moz-transition: width 2s cubic-bezier(.15,.88,0,.99);
    -webkit-transition: width 2s cubic-bezier(.15,.88,0,.99);
}
div:hover {
    width:100%;
}

Когда я наведу курсор мыши на div в Chrome, IE и Edge, я увижу ширину от 10% до 100%.

При наведении указателя мыши на элемент div в Chrome скорость анимации начинается быстро и заканчивается медленно. Когда я щелкаю мышью, скорость анимации начинается быстро и заканчивается медленно.

Когда я нахожу курсор мыши на div в IE 11 или Edge, скорость анимации начинается быстро и заканчивается медленно. Когда я щелкаю мышью, скорость анимации начинается медленно и заканчивается быстро.

Могу ли я заставить IE11 и Edge вести себя так же, как Chrome? Если да, то как мне это сделать?