Mozilla gradiente com qualidade ruim | HTML e CSS

Boa tarde ,

Testei em 3 navegadores o gradiente porém ao testar no mozilla a transição perde a qualidade e fica distorcida ou fica sem muito efeito .

segue o código:



<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">


        <link rel="stylesheet" type="text/css" href="estilo.css"/>

        <title>Background Gradient</title>

        <!--[if lt IE 9]>
        <script src="js/html5shiv.js"></script>
        <![endif]-->


    </head>
    <body>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script type="text/javascript"></script>

        <ul>

         <li><a class="active" href="#home">Home</a></li>
         <li><a href="#news">Quem somos</a></li>
         <li><a href="#contact">Contato</a></li>
         <li><a href="#contact">Login</a></li>
         <li><a href="#about">Ajuda</a></li>
         <li><a href="#about">Corporativo</a></li>
        </ul>



        <h1> teste</h1>


    </body>
</html>

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #222;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}



 body {
                background: linear-gradient(80deg, #7bc3ab, #1665c1);
                background-size: 300% 300%;
                animation: BackgroundGradient 15s ease infinite;

            }

@keyframes BackgroundGradient {
                0% {background-position: 0% 50%;}
                50% {background-position: 100% 50%;}
                100% {background-position: 0% 50%;}
                 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#efefef), to(#333)); 
            }


 h1 {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translateX(-50%) translateY(-50%);
                font-family: Open Sans, sans-serif;
                color: #fff;
                font-weight: 400;
                text-transform: uppercase;
                text-align: center;
                font-size: 2em;
                background-color: #000;
                padding: 5px;
 }