CSS Marquee on MS Edge

Question

Я нашел this awesome CSS-Marquee и работает почти на каждом браузере, но, к сожалению, не на MS Edge. При наведении курсора на Marquee это должно остановить, но края не нравится

.marquee span:hover 
{ 
    animation-play-state: paused; 
} 

Это еще хуже, потому что край делает это невозможным, чтобы отметить текст в Marquee и все ссылки в Marquee сломаны.

Вот полный код:

<div class="marquee"> 
    <span>Some long text with a few <a href="#">Links</a> and bla bla</span> 
</div> 

/* define the animation */ 
@keyframes marquee 
{ 
    0% { transform: translate(0, 0); } 
    100% { transform: translate(-100%, 0); } 
} 

/* define your limiting container */ 
.marquee 
{ 
    width: 100%; 
    margin: 0 auto; 
    white-space: nowrap; 
    overflow: hidden; 
    box-sizing: border-box; 
} 

/* this is the tray moving around your container */ 
.marquee span 
{ 
    display: inline-block; 
    padding-left: 100%; 
    text-indent: 0; 
    animation: marquee 60s linear infinite; /* here you select the animation */ 
} 

/* pause the animation on mouse over */ 
.marquee span:hover 
{ 
    animation-play-state: paused; 
} 

Любые решения для этого? Может быть, отдельный CSS для Edge? И можно ли сделать скорость анимации одинаковой для разной длины текста?

EDIT: OK! Таким образом, я нашел способ сделать скорость то же самое с другой текстовой клыков:

<script> 
function calcSpeed(speed) { 
// Time = Distance/Speed 
var spanSelector = document.querySelector('.marquee span'); 
var spanLength = spanSelector.offsetWidth; 
var timeTaken = spanLength/speed; 
spanSelector.style.animationDuration = timeTaken + "s"; 
} 
calcSpeed(100); 
</script> 

Но есть еще проблема, что край не нравится «анимация-плей-состояние: приостановлена;» и сломать все ссылки в шатре