Border rendering exception

as shown in the figure, the first time you enter this page, the left border of textarea goes to the label above.
clipboard.png
UI
clipboard.png

this problem occurs repeatedly, it is not clear what caused it, the width of textarea is not exceeded, and box-sizing:border-box;

is also used.
.form-group{
    position: relative;
    width: 34.2rem;
    margin: 0 auto;
}
.form-group>textarea{
    display:block;
    width: 100%;
    height: 5.35rem;
    border: 1px solid -sharpccc;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: .8rem;
    resize:none;
    outline: none;
}

Mar.03,2021

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    textarea{
        display:block;
        width: 100%;
        height: 5.35rem;
        border: 1px solid -sharpccc;
        margin: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        font-size: .8rem;
        resize:none;
        outline: none;
    }
</style>
<body>
    <textarea name="">
        

    </textarea>
    
</body>
</html>

if everything is normal, what about testing in another environment?

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1bf4b6f-31f0a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1bf4b6f-31f0a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?