Safari (mobile and desktop) table float bug

Question

I have a table that's formatted as a menu, and it should adapt itself when the window gets too small (using media queries). Instead of in a line, the menu items should position themselves beneath each other, so like this:

It works fine in Chrome desktop, however when I try it in safari this happens:

It's really odd. I have cleared the cache so that's not the problem. The same issue occurs on mobile safari and mobile chrome. I'm really dumbstruck here, I hope someone knows a solution. Here's a JSfiddle demonstrating the menu: https://jsfiddle.net/0wwnqkd9/ EDIT: wanted to add, it does work in the JSFiddle, in Safari.

You can also visit this website for a demo

And the (isolated) code:

HTML

<div id="MENU_WR">
    <table id="MENU">
        <td><a href="#ABOUT">about</a></td>
        <td><a href="#products">products</a></td>
        <td><a href="#portfolio">portfolio</a></td>
        <td><a href="#portfolio">portfolio</a><
    </table>
</div>

CSS

body {
    background-color: #171319;
}

#MENU_WR {
    position: absolute;
    top: 100px;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 600px;
    width: 60%;
    height: 55px;
    border: 2px solid rgba(128, 176, 105, 0.3);
    border-radius: 10px;
    animation: menuDown 1.5s ease-in;
}

#MENU {
    font-family: Comfortaa, Arial;
    border-collapse: collapse;
    font-weight: normal;
    width: 100%;
    height: 100%;
    font-size: 20px;
    color: #7fb069;
    text-align: center;
}

#MENU td {
    width: 25%;
    height: 100%;
}

#MENU td>a {
    padding-top: 15px;
    display: block;
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: 100%;
}

#MENU td:hover {
    background: rgba(128, 176, 105, 0.3);
}

#MENU td:first-child {
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
}

#MENU td:last-child {
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
}

@media screen and (max-width: 980px) {
    #MENU_WR {
        display: inline-block;
        width: 100%;
        max-width: none;
        border: none;
        height: 220px;
        border-radius: 0;
    }
    #MENU td {
        display: inline-block;
        width: 100%;
        height: 25%;
        float: left;
        border-radius: 0;
    }
    #MENU {
        float: left;
    }
    #MENU td:first-child {
        border-bottom-left-radius: 0px;
        border-top-left-radius: 0px;
    }
    #MENU td:last-child {
        border-bottom-right-radius: 0px;
        border-top-right-radius: 0px;
    }
}

Answer 1

First, the markup on your site and the fiddle are different. In your example code, you omit the tbody and tr tags, which appear on your site.

A better approach would be using a ul for your nav, and using flexbox to change the orientation. Working example: https://jsfiddle.net/563nrLrp/1/

body {
    background-color: #171319;
}


#MAIN_WR {
    width: 100%;
    height: 100%;
}

#LOGO_SPLASH {
    position: absolute;
    top: -165px;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 800px;
    width: 80%;
    height: auto;
    animation: logoUp 1.5s ease-out;
}

#MENU_WR {
    position: absolute;
    top: 100px;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 600px;
    width: 60%;
    height: 55px;
    border: 2px solid rgba(128, 176, 105, 0.3);
    border-radius: 10px;
    animation: menuDown 1.5s ease-in;
}

#MENU {
    font-family: Comfortaa, Arial;
    border-collapse: collapse;
    font-weight: normal;
    width: 100%;
    height: 100%;
    font-size: 20px;
    color: #7fb069;
    text-align: center;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

#MENU li {
    width: 25%;
    height: 100%;
}

#MENU li>a {
    padding-top: 15px;
    display: block;
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: 100%;
}

#MENU li:hover {
    background: rgba(128, 176, 105, 0.3);
}

#MENU li:first-child {
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
}

#MENU li:last-child {
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
}

@media screen and (max-width: 980px) {
    #MENU_WR {
        display: inline-block;
        width: 100%;
        max-width: none;
        border: none;
        height: 220px;
        border-radius: 0;
    }
    #MENU li {
        display: block;
        width: 100%;
        height: 25%;
        border-radius: 0;
    }
    
    #MENU {
      display: block;
    }

    
    #MENU li:first-child {
        border-bottom-left-radius: 0px;
        border-top-left-radius: 0px;
    }
    #MENU li:last-child {
        border-bottom-right-radius: 0px;
        border-top-right-radius: 0px;
    }
}

<nav id="MENU_WR">
    <ul id="MENU">
        <li><a href="#ABOUT">about</a></li>
        <li><a href="#products">products</a></li>
        <li><a href="#portfolio">portfolio</a></li>
        <li><a href="#contact">contact</a></li>
    </ul>
</nav>