CODEWITHSUNDEEP
javascripthtmlcss
Wienievra
Wienievra

Reputation: 41

Code not working in IE and Edge

I have a script that works perfectly in Chrome, but the CSS does not work in Edge and the scrolling text does not work in IE10.

See how it should work in Chrome (please allow about 5 seconds for the scrolling text to start:

https://jsfiddle.net/oxw4e5yh/

CSS:

<style>
/* Make it a marquee */

.marquee {
    width: 100%;
    left: 0px;
    height: 10%;
    position: fixed;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    background-color: #000000;
    bottom: 0px;
    color: white;
    font: 50px'Verdana';
}
.marquee span {
    display: inline-block;
    padding-left: 100%;
    text-indent: 0;
    animation: marquee linear infinite;
    background-color: #000000;
    color: white;
    bottom: 0px;
}
/* Make it move */

@keyframes marquee {
    0% {
        transform: translate(10%, 0);
    }
    100% {
        transform: translate(-100%, 0);
    }
}
/* Make it pretty */

.scroll {
    padding-left: 1.5em;
    position: fixed;
    font: 50px'Verdana';
    bottom: 0px;
    color: white;
    left: 0px;
    height: 10%;
}
</style>

Upvotes: 0

Views: 305

Answers (1)

Poul Kruijt
Poul Kruijt

Reputation: 71931

The reason why your CSS doesn't work in Edge is because of the font declaration. There is a space missing. Change inside .marquee:

font: 50px Verdana;

The reason it doesn't work in IE10/IE11 is that the animationDuration property is not supported in JavaScript. See here

If you want to make it work though, you should remove the animation: marquee linear infite; from the css and add it to the JavaScript:

CSS

.marquee span {
    display: inline-block;
    padding-left: 100%;
    text-indent: 0;
    background-color: #000000;
    color: white;
    bottom: 0px;
}

JS

spanSelector[i].style.animation = "marquee linear infinite " + timeTaken + "s";

Now it should work in IE10/IE11 :)

Upvotes: 2

Related Questions