css вместе с js работают некорректно

Рейтинг: 0Ответов: 0Опубликовано: 09.06.2023

У меня такая проблема, что возле цифр или возле текста появляются при каких-то расширениях экрана зеленые полоски тонкие, я так понимаю, что это пробивается бекграунд шрифтов, тот, что для градиента Я пробовал задавать с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>

Выглядит примерно так: введите сюда описание изображения

Подскажите, как от этого избавиться, у меня совсем идеи закончились :(

Ответы

Ответов пока нет.