Chrome превращает странные прямоугольники в эффект «матового стекла»

Question

Я настроил эффект «матового стекла» в форме входа в систему, но в нее продолжают вноситься странные прямоугольники.

Это происходит только в Chrome и только в настольном варианте. Я использую Chrome 74 на Windows 10.

Вот мой CSS:

body {
    background-image: linear-gradient(10deg, #a1d9b4 20%, #32988a 40%, #000e3c 70%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.loginContainer {
    padding: 15px 14vw 15px 14vw;
    max-width: 500px;
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}

.loginContainer:before {
    content: "";
    position: absolute;
    background: inherit;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
    filter: blur(10px);
    margin: -20px;
}

И мой JSX:

<Container className="container">
    <div className="loginContainer">
        <img src={"/default_light.png"} className="profileImage" alt="" />
        <input className="username" onChange={this.handleInputChange} type="text" placeholder="Username or Email" />
        <input className="password" onChange={this.handleInputChange} type="password" placeholder="Password" />
        <label className="stayLoggedInLabel">Remember me <input className="stayLoggedIn" onChange={this.handleInputChange} type="checkbox" /></label>
        <Link className="forgotPasswordLink" to={"/reset"}>Forgot password?</Link>
        <div className="loginButtonContainer">
            <button className="loginButton" onClick={this.tryLogin}>Login</button>
        </div>
    </div>
</Container>

Результат в Chrome: Результат в Chrome

Результат в Firefox: Результат в Firefox

Кто-нибудь знает, как исправить это поведение?
Заранее спасибо!