移动浏览器Chrome/Edge中带有阴影的文本上出现一些白线看起来像剪裁

如何解决移动浏览器Chrome/Edge中带有阴影的文本上出现一些白线看起来像剪裁

在下面的屏幕截图中，移动浏览器中字母“a”中的白线，在桌面上工作得很好。 [本图][1]：https://i.stack.imgur.com/BidFW.jpg

您也可以直接查看网站 https://dannyglade.github.io/DG/

.title .left-title > h1{
    font-family: 'Tourney',cursive;
    font-style: italic;
    font-weight: 900;
    font-size: 80px;
    text-shadow: 4.5px 3.5px 0 rgb(224,224,224);
    margin: 0;
}

.title .left-title > h3{
    margin: 0;
    font-style: italic;
    font-weight: 400;
    font-size: 30px;
    margin-bottom: -15px;
}
.title .left-title > p {
    font-size: 20px;
}
.title .right-title {
    text-align: center;
}
.title .right-title> i{
    font-size: 200px;
    color: rgba(0,0.5);
    text-shadow: 4.5px 3.5px 0 rgb(224,0.2);
}

<script src="https://kit.fontawesome.com/10cf85d80f.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid title row pt-lg-5 pt-md-5 pb-5 ps-lg-5 pe-lg-5">

            <div class="left-title col-lg-6 col-md-6">
                <h3>Name is</h3>
                <h1>Darshan</h1>
                <p>Wanna be a Web-Developer...</p>
            </div>
            <div class="right-title col-lg-6 col-md-6">
                <i class="fas fa-code"></i>
            </div>
        </div>