css вместе с js работают некорректно
У меня такая проблема, что возле цифр или возле текста появляются при каких-то расширениях экрана зеленые полоски тонкие, я так понимаю, что это пробивается бекграунд шрифтов, тот, что для градиента Я пробовал задавать сss немного по-другому через bg-image и все такое, но проблема не уходит У меня есть такой код:
document.addEventListener('DOMContentLoaded', function() {
// конечная дата, например 1 июля 2023
const deadline = new Date(2023, 5, 30);
// id таймера
let timerId = null;
// склонение числительных
function declensionNum(num, words) {
return words[(num % 100 > 4 && num % 100 < 20) ? 2 : [2, 0, 1, 1, 1, 2][(num % 10 < 5) ? num % 10 : 5]];
}
// вычисляем разницу дат и устанавливаем оставшееся времени в качестве содержимого элементов
function countdownTimer() {
const diff = deadline - new Date();
if (diff <= 0) {
clearInterval(timerId);
}
const days = diff > 0 ? Math.floor(diff / 1000 / 60 / 60 / 24) : 0;
const hours = diff > 0 ? Math.floor(diff / 1000 / 60 / 60) % 24 : 0;
const minutes = diff > 0 ? Math.floor(diff / 1000 / 60) % 60 : 0;
const seconds = diff > 0 ? Math.floor(diff / 1000) % 60 : 0;
let days_split = (days).toString().split('');
let day_one = days_split[0];
let day_two = days_split[1];
$days.innerHTML = days < 10 ? "<div><span>" + '0' + "</span></div>" + "<div><span>" + day_one + "</span></div>" : "<div><span>" + day_one + "</span></div>" + "<div><span>" + day_two + "</span></div>";
let hours_split = (hours).toString().split('');
let hours_one = hours_split[0];
let hours_two = hours_split[1];
$hours.innerHTML = hours < 10 ? "<div><span>" + '0' + "</span></div>" + "<div><span>" + hours_one + "</span></div>" : "<div><span>" + hours_one + "</span></div>" + "<div><span>" + hours_two + "</span></div>";
let minutes_split = (minutes).toString().split('');
let minutes_one = minutes_split[0];
let minutes_two = minutes_split[1];
$minutes.innerHTML = minutes < 10 ? "<div><span>" + '0' + "</span></div>" + "<div><span>" + minutes_one + "</span></div>" : "<div><span>" + minutes_one + "</span></div>" + "<div><span>" + minutes_two + "</span></div>";
let seconds_split = (seconds).toString().split('');
let seconds_one = seconds_split[0];
let seconds_two = seconds_split[1];
$seconds.innerHTML = seconds < 10 ? "<div><span>" + '0' + "</span></div>" + "<div><span>" + seconds_one + "</span></div>" : "<div><span>" + seconds_one + "</span></div>" + "<div><span>" + seconds_two + "</span></div>";
$days.dataset.title = declensionNum(days, ['день', 'дня', 'дней']);
$hours.dataset.title = declensionNum(hours, ['час', 'часа', 'часов']);
$minutes.dataset.title = declensionNum(minutes, ['минута', 'минуты', 'минут']);
$seconds.dataset.title = declensionNum(seconds, ['секунда', 'секунды', 'секунд']);
}
// получаем элементы, содержащие компоненты даты
const $days = document.querySelector('.timer__days');
const $hours = document.querySelector('.timer__hours');
const $minutes = document.querySelector('.timer__minutes');
const $seconds = document.querySelector('.timer__seconds');
// вызываем функцию countdownTimer
countdownTimer();
// вызываем функцию countdownTimer каждую секунду
timerId = setInterval(countdownTimer, 1000);
});
.timer {
padding-bottom: 45px;
margin-bottom: 70px;
}
.timer__items {display: flex; justify-content: space-between;}
.timer__item {
position: relative;
min-width: 60px;
padding-bottom: 15px;
text-align: center;
background-color: transparent;width: fit-content;
}
.timer__item::before {
content: attr(data-title);
display: block;
position: absolute;
left: 50%;
bottom: -40px;
transform: translateX(-50%);
font-family: 'Prosto One', cursive;
font-style: normal;
font-weight: 400;
font-size: 34px;
line-height: 44px;
text-align: center;
background: linear-gradient(225deg, #01E776 0%, #0B5A4C 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
width: fit-content;
}
.timer__item:not(:last-child)::after {
content: ':';
position: absolute;
top: 45%;
right: -90px;
transform: translateY(-50%);
font-family: 'Prosto One', cursive;
font-size: 100px;
line-height: 90px;
background: linear-gradient(225deg, #01E776 0%, #0B5A4C 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
.timer__item {display: flex;}
.timer__item div {
background: linear-gradient(293.76deg, #171A20 0%, #171B1A 0.01%, #111111 100%);
box-shadow: 0px 15px 80px rgba(0, 0, 0, 0.25);
padding: 26px 14px;
display: flex;
justify-content: center;
align-items: center;
width: 100px;
max-height: 135px;
height: fit-content;
}
.timer__item div:first-of-type {margin-right: 5px;}
.timer__item div span {
font-family: 'Prosto One',cursive;
font-size: 90px;
line-height: 80px;
background: linear-gradient(225deg, #01E776 0%, #0B5A4C 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
margin-bottom: 0 !important;
}
<div class="timer">
<div class="timer__items">
<div class="timer__item timer__days">00</div>
<div class="timer__item timer__hours">00</div>
<div class="timer__item timer__minutes">00</div>
<div class="timer__item timer__seconds">00</div>
</div>
</div>
Подскажите, как от этого избавиться, у меня совсем идеи закончились :(
Источник: Stack Overflow на русском