CSS при высоте блока 4px выглядят все по разному

Question

Почему первый элемент прогрессбара выглядит тоньше чем остальные? По стилизация они одинаковы

.skill-text {
  font-family: 'Roboto', sans-serif;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.skill-text__title {
  font-size: 22px;
}
.skill-text__percent {
  font-weight: 300;
  font-size: 18px;
}
.skill-progress {
  width: 100%;
  height: 4px;
  background: #D9DBE3;
}
.skill-progress span {
  display: block;
  height: 100%;
  background: #FF6F14;
}
.skill-progress__design {
  width: 85%;
}
.skill-progress__programming {
  width: 65%;
}
.skill-progress__marketing {
  width: 75%;
}

<div class="skill">
            <div class="skill__item">
              <div class="skill-text">
                <p class="skill-text__title">Web Design</p>
                <span class="skill-text__percent">85%</span>
              </div>
              <div class="skill-progress">
                <span class="skill-progress__design"></span>
              </div>
            </div>
            <div class="skill__item">
              <div class="skill-text">
                <p class="skill-text__title">Programming</p>
                <span class="skill-text__percent">65%</span>
              </div>
              <div class="skill-progress">
                <span class="skill-progress__programming"></span>
              </div>
            </div>
            <div class="skill__item">
              <div class="skill-text">
                <p class="skill-text__title">Programming</p>
                <span class="skill-text__percent">65%</span>
              </div>
              <div class="skill-progress">
                <span class="skill-progress__programming"></span>
              </div>
            </div>
          </div>

Answer 1

Если имеется в виду этот баг Firefox, то можно попробовать трюк с поворотом: transform: rotate(0.0001deg);

.skill-text {
  font-family: 'Roboto', sans-serif;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.skill-text__title {
  font-size: 22px;
}
.skill-text__percent {
  font-weight: 300;
  font-size: 18px;
}
.skill-progress {
  width: 100%;
  height: 4px;
  transform: rotate(0.0001deg);
  background: #D9DBE3;
}
.skill-progress span {
  display: block;
  height: 100%;
  background: #FF6F14;
}
.skill-progress__design {
  width: 85%;
}
.skill-progress__programming {
  width: 65%;
}
.skill-progress__marketing {
  width: 75%;
}

<div class="skill">
            <div class="skill__item">
              <div class="skill-text">
                <p class="skill-text__title">Web Design</p>
                <span class="skill-text__percent">85%</span>
              </div>
              <div class="skill-progress">
                <span class="skill-progress__design"></span>
              </div>
            </div>
            <div class="skill__item">
              <div class="skill-text">
                <p class="skill-text__title">Programming</p>
                <span class="skill-text__percent">65%</span>
              </div>
              <div class="skill-progress">
                <span class="skill-progress__programming"></span>
              </div>
            </div>
            <div class="skill__item">
              <div class="skill-text">
                <p class="skill-text__title">Programming</p>
                <span class="skill-text__percent">65%</span>
              </div>
              <div class="skill-progress">
                <span class="skill-progress__programming"></span>
              </div>
            </div>
          </div>

БЛОГ НА HUSL

CSS при высоте блока 4px выглядят все по разному

Ответы (1 шт):