Q:

HTML Marquee text on my site moves at a weird speed but when it's viewed in Chrome, it's perfectly fine?

Here is my HTML file:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>namename</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
</head>
<body>

    <div class="mainbanner">
        <h4><marquee loop="100">hello i'm moving<img src="emoticon.png" alt="sarang" height="30" width="30"></h4></marquee>
        <h1>aaa®</h1>

       <nav id="primary_nav_wrap"> 
        <ul>
            <li><a href="">page1</a></li> |
            <li><a href="">page2</a></li> |
            <li><a href="">page3</a></li> |
            <li><a href="">page4</a></li> | 
            <li><a href="">page5</a></li> |
            <li><a href="">page6</a></li> |
            <li><a href="">page 7</a></li>
        </ul>
    </nav>
    </div>

    <div id="time">
    </div>

     <div class="board">

    </div>

    <div class="signup">
        <button>aaa login</button>
    </div>

    <div class="gaeshi">
        <h4>board</h4>
        <a href="http://www.yahoo.com">board 1</a>
        <a href="http://www.yahoo.com">board 2</a>
        <a href="http://www.yahoo.com">board 3</a>
        <a href="http://www.yahoo.com">board 4</a>
    </div>

<div class="music">
    <marquee behavior="scroll" direction="slow" scrollamount="5"><h3>song playing</marquee></h3>
    <audio controls style="width: 200px;" autoplay="autoplay" />
        <source src="todaysong.mp3" type="audio/mpeg">
    </audio>
</div>

    <div class="search">
    <input type="text" name="username">
    </div>

    <div class="buttons">
        <button>Search</button>
        <button>Cancel</button>
    </div>

    <!--FOOTER --> 
    <div id="footer">
   <p class="copyright">© 2016 aaa. All Rights Reserved.</p>
    </div>

    <script src="app.js"></script>
</body>
</html>

So when I open the HTML file on Chrome, everything looks fine and normal with everything the way I want it to be. However, when I open it on Safari, the marquee text on the top moving right to left appears to be weird and makes me dizzy when  look at it and the margin/alignment is slightly off. Is there a way I can fix this issue? Can't seem to figure out what the problem may be. It just looks strange and different on Safari.

A:

marquee is an obsolete feature. It shouldn't be used because it does not have particularly strong cross-browser compatibility.

This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee
The truespeed attribute in particular has no support in either Opera or Safari.

