Why can't linear-gradient be displayed on iPhone and Android explorer (can be displayed on PC explorer)

I'm building this log-in html file, the codes are as followed:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS Test</title>
        <link type="text/javascript" herf="jquery.js"/>
    </head>
    <body>
        <div id="div1">
            <input placeholder="Username:" class="inputter" id="inputter1"/>
            <input placeholder="Password:" class="inputter" id="inputter2"/>
            <button onclick="" id="button1">Submit</button>
        </div>
    </body>
    <style type="text/css">
        body{
                -webkit-font-smoothing: antialiased;
                visibility: visible;
                text-decoration: none;
                margin: 0;
                padding: 0;
                border: 0;
                font: inherit;
                font-size: 100%;
                vertical-align: baseline;
                box-sizing: border-box;
                overflow: hidden;
                -webkit-tap-highlight-color: transparent;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, rgb(243, 72, 104) 20.1814%, rgb(242, 71, 104) 20.1814%, rgb(158, 0, 236) 80.1832%);
        }
    </style>
</html>

When I tried to open it on PC, iPhone and Andriod web explorer, I found that it could only be displayed correctly on PC explorer, others have no background gradients. Please tell me why and how to fix it. Thanks very much.

Solution

Remove position: absolute; from the body.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS Test</title>
        <link type="text/javascript" herf="jquery.js"/>
    </head>
    <body>
        <div id="div1">
            <input placeholder="Username:" class="inputter" id="inputter1"/>
            <input placeholder="Password:" class="inputter" id="inputter2"/>
            <button onclick="" id="button1">Submit</button>
        </div>
    </body>
    <style type="text/css">
        body{
                -webkit-font-smoothing: antialiased;
                visibility: visible;
                text-decoration: none;
                margin: 0;
                padding: 0;
                border: 0;
                font: inherit;
                font-size: 100%;
                vertical-align: baseline;
                box-sizing: border-box;
                overflow: hidden;
                -webkit-tap-highlight-color: transparent;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, rgb(243, 72, 104) 20.1814%, rgb(242, 71, 104) 20.1814%, rgb(158, 0, 236) 80.1832%);
        }
    </style>
</html>