Когда я смотрю в Google Chrome в поисках своего веб-приложения, которое представляет собой список задач, стиль является согласованным и не создает случайных строк. Я заметил странные «артефакты» только тогда, когда зашел на устройство Apple и заметил, что вокруг моего текста есть маленькие линии. Я сделаю ссылку на сайт, а также предоставлю свои коды CSS и HTML ниже. Я хотел бы знать, как я могу отредактировать свой код, чтобы артефакты не появлялись в браузерах Safari. Вот моя ссылка, не стесняйтесь добавлять задачи для визуализации: https://todolist--ibrahimshah.repl.co/
h1{
padding:0;
margin:0;
}
body{
display:flex;
font-family: 'Lato', sans-serif;
margin:0;
padding:0;
background: linear-gradient(to left, #743ad5, #d53a9d);
}
.text{
background: linear-gradient(to left, #743ad5, #d53a9d);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size:5vh;
font-weight:700;
}
.header{
display:flex;
align-items:center;
justify-content:center;
padding:1vw;
}
#nav{
width:100vw;
border-style:solid;
border-width:1.25vw;
border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
border-image-slice:3;
background:white;
}
#idk{
position:absolute;
display:flex;
align-items:center;
justify-content:center;
height:70vh;
width:35vw;
background:white;
left:50vw;
top:55vh;
transform:translate(-50%, -50%);
}
#innerText{
position:absolute;
top:3vh;
display:inline;
}
#inputField{
}
#bullets{
position:absolute;
top:40vh;
}
.smallText{
background: linear-gradient(to left, #743ad5, #d53a9d);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size:3vh;
font-weight:700;
}
#input{
border-top: 0.25vw;
border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
border-width: 0.25vw;
border-image-slice: 1;
border-right-style:none;
border-left-style:none;
width:20vw;
height:2vh;
}
#inputArea{
top:15vh;
position:absolute;
display:flex;
align-items:center;
justify-content:center;
width:35vw;
height:5vh;
}
ul{
}
#submitButton{
text-decoration:none;
right:1.5vw;
position:absolute;
width:5vw;
height:4vh;
background: linear-gradient(to left, #743ad5, #d53a9d);
color:white;
font-family: 'Lato', sans-serif;
border-radius:1vw;
font-weight:700;
font-size:2vh;
}
#listArea{
position:absolute;
top: 25vh;
width:25vw;
height:35vh;
border-style:solid;
border-width:0.75vw;
border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
border-image-slice:3;
background:white;
font-size:2vh;
}
.newLists{
display:flex;
font-size:2vh;
height:33vh;
}
#listArea{
overflow:scroll;
}
.btn{
text-decoration:none;
width:4.5vw;
height:3.5vh;
background: linear-gradient(to left, #743ad5, #d53a9d);
-webkit-text-fill-color: white;
color:white;
font-family: 'Lato', sans-serif;
border-radius:1vw;
font-weight:700;
font-size:1.75vh;
position:absolute;
right:0;
}
.textList{
margin-top:2vh;
margin-bottom:2vh;
background: linear-gradient(to left, #743ad5, #d53a9d);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size:2vh;
font-weight:700;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Todo List</title>
<link href="/views/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="nav">
<div class="header"><div class="text">To-do List Webapp</div></div>
</div>
<div id="idk">
<div id="innerText" class="text" >Tasks:</div>
<div id="inputArea">
<form>
<input required type="text" id="input"><input type="submit" id="submitButton" onclick="returnTask()">
</form>
</div>
<div id="listArea">
<ul id="divArea">
</ul>
</div>
</div>
<script src="/views/script.js"></script>
</body>
</html>