点击首个网格输入框时所有表单文本变暗，如何修复该问题？

页面初始状态 #

异常现象 #

点击第一个网格项（登录容器）里的输入框时，屏幕上所有粉色文本（仅文本，不含边框，包括按钮上的文字）会轻微变暗，看起来像是字体缩小了或者亮度降低了。这个现象只有输入框处于选中状态时才会出现，截图操作会自动取消选中，没法完整捕捉到完整状态。

正常状态 #

点击其他网格项（注册容器）里的输入框时，就不会出现上述异常：

卡这个问题好久了，实在没辙才来求助，第一次提问，麻烦各位帮忙看看原因或者给点解决思路。

HTML代码 #

<div id = "formscontainer">
        
    <div id = "logincontainer">
        <div class = "dashbar">Log In</div>

        <form id = "loginform">
            <div id = "userwrap">
                <input id = "loginuser" type = "text">
            </div>
            <div id = "passwrap">
                <input id = "loginpass" type = "text">
            </div>

            <button id = "loginbutton" type = "submit">Login</button>
            <button id = "recoverbutton" type = "submit">Recover</button>
        </form>

        <p>
            For best user experience, please enable cookies in your browser. This is simply to ensure that you don't have to 
            log in consecutively in the same window. The service will automatically be able to identify your session when cookies 
            are enabled and you have logged in successfully without logging back out. Please be safe and enjoy!
        </p>
    </div>

    <div id = "signupcontainer">
        <div class = "dashbar">Create an Account</div>

        <form id = "createform">
            <div id = "userwrapW">
                <input id = "createuser" type = "text">
            </div>
            <div id = "passwrapW">
                <input id = "createpass" type = "text">
            </div>
            <div id = "reenterwrapW">
                <input id = "createreenter" type = "text">
            </div>

            <button id = "createbutton" type = "submit">Create</button>
            <button id = "aboutbutton" type = "submit">About</button>
        </form>
    </div>
</div>

CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap');

body
{
    background:black;
    width: 100%;
    margin: 0;
    font-family: 'JetBrains Mono', monospace;
}

#formscontainer
{
    width: 70vw;
    height: auto;
    position: absolute;
    top: 10%;
    left: 17%;
    z-index: 9;
    display: grid;
    grid-template-columns: 25vw 40vw;
    grid-template-rows: 73vh;
    grid-gap: 2vw;
}

#logincontainer
{   
    border: 1px solid black;
    background: linear-gradient(to top, #0d0d0d, #171717);
}

#signupcontainer
{
    border: 1px solid black;
    background: linear-gradient(to top, #0d0d0d, #171717);
}

.dashbar
{
    color: white;
    padding: 0.5vh;
    text-align: center;
}

.dashbar::after
{
    content: "";
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0% 3%, #FF008B 3% 98%, rgba(0, 0, 0, 0) 98%);;
    width: 100%;
    height: 1px;
    display: block;
}

#loginform input
{
    background-color: /*#2e2b2b*/#1d1d1d;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.1em;
    margin-left: 0.85vw;
    color: white;
    width: 23.1vw;
    height: 3vh;
    margin-top: 9vh;
    border: none;
    outline: none;
}

#createform input
{
    background-color: /*#2e2b2b*/#1d1d1d;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.1em;
    margin-left: 0.85vw;
    color: white;
    width: 38.1vw;
    height: 3vh;
    margin-top: 9vh;
    border: none;
    outline: none;
}

#userwrap::before
{
    content: "Username:";
    font-size: 0.9em;
    color: #FF008B;
    width: 3.56vw;
    height: 1vh;
    display: block;
    position: relative;
    top: 7.5vh;
    left: 1vw;
}
    
#userwrap::after
{
    content: "";
    background-color: #FF008B;
    width: 23.28vw;
    position: relative;
    margin-left: 0.85vw;
    height: 0.1vh;
    display: block;
}
    
#passwrap::before
{
    content: "Password:";
    font-size: 0.9em;
    color: #FF008B;
    width: 3.56vw;
    height: 1vh;
    display: block;
    position: relative;
    top: 7.5vh;
    left: 1vw;
}
    
#passwrap::after
{
    content: "";
    background-color: #FF008B;
    width: 23.28vw;
    position: relative;
    margin-left: 0.85vw;
    height: 0.1vh;
    display: block;
}

#userwrapW::before
{
    content: "Username:";
    font-size: 0.9em;
    color: #FF008B;
    width: 3.56vw;
    height: 1vh;
    display: block;
    position: relative;
    top: 7.65vh;
    left: 1vw;
}
    
#userwrapW::after
{
    content: "";
    background-color: #FF008B;
    width: 38.33vw;
    position: relative;
    margin-left: 0.85vw;
    height: 0.1vh;
    display: block;
}
    
#passwrapW::before
{
    content: "Password:";
    font-size: 0.9em;
    color: #FF008B;
    width: 3.56vw;
    height: 1vh;
    display: block;
    position: relative;
    top: 7.65vh;
    left: 1vw;
}
    
#passwrapW::after
{
    content: "";
    background-color: #FF008B;
    width: 38.33vw;
    position: relative;
    margin-left: 0.85vw;
    height: 0.1vh;
    display: block;
}

#reenterwrapW::before
{
    content: "Re-enter Password:";
    font-size: 0.9em;
    color: #FF008B;
    width: auto;
    height: 1vh;
    display: block;
    position: relative;
    top: 7.65vh;
    left: 1vw;
}
    
#reenterwrapW::after
{
    content: "";
    background-color: #FF008B;
    width: 38.33vw;
    position: relative;
    margin-left: 0.85vw;
    height: 0.1vh;
    display: block;
}

#loginform button
{
    color: #FF008B;
    font-size: 1em;
    font-family: 'JetBrains Mono', monospace;
    background-color: rgba(0, 0, 0, 0);
    width: 11vw;
    height: 2.5em;
    border: 1px solid #FF008B;
    position: relative;
    top: 4em;
    left: 1.2vw;
    transition: color 0.2s ease-out, background-color 0.2s ease-out;
}

#loginform button:hover
{
    cursor: pointer;
    color: white;
    background-color: #FF008B;
}

#createform button
{
    color: #FF008B;
    font-size: 1em;
    font-family: 'JetBrains Mono', monospace;
    background-color: rgba(0, 0, 0, 0);
    width: 93%;
    height: 2.5em;
    border: 1px solid #FF008B;
    margin-top: 1.2vh;
    position: relative;
    top: 4em;
    left: 1.2vw;
    transition: color 0.2s ease-out, background-color 0.2s ease-out;
}

#createform button:hover
{
    cursor: pointer;
    color: white;
    background-color: #FF008B;
}

p
{
    color: white;
    font-size: 0.5vw;
    text-align: center;
    width: 90%;
    margin-left: 1vw;
    position: relative;
    top: 25vh;
}

1. 强制统一字体渲染：你用的JetBrains Mono是等宽字体，部分浏览器在输入框获焦时，可能触发字体渲染策略切换（比如亚像素渲染开关），导致同字体的其他文本显示异常。试试给所有粉色文本元素强制设置字体渲染属性：

#userwrap::before, #passwrap::before, #userwrapW::before, #passwrapW::before, #reenterwrapW::before,
#loginform button, #createform button {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

或者直接全局设置，覆盖浏览器默认行为：

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

2. 重置输入框焦点样式：试试给登录输入框的焦点状态强制同步非焦点时的样式，避免浏览器默认的focus样式触发全局渲染变化：

#loginform input:focus {
    outline: none;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.1em;
    color: white;
    background-color: #1d1d1d;
}

3. 排查浏览器硬件加速问题：这种局部触发全局文本变化的情况，大概率是浏览器硬件加速的bug。试试关闭浏览器的硬件加速功能（比如Chrome里是设置→系统→关闭“使用硬件加速模式”），之后再测试看是否还会出现。

4. 替换相对单位为固定值：你用了vw、vh这类相对单位，不同元素的字体大小计算可能因为精度问题，在输入框获焦时触发页面重排，导致字体显示变化。可以试试把粉色文本的字体大小从0.9em换成固定px值（比如14px），或者把部分vw单位换成px，看是否能解决。

内容的提问来源于stack exchange，提问作者Robby