Как пофиксить баг с font-weight при наведении?

Question

[GR么ND]

У меня появилась проблема связанная с ссылкой в navbar'e: при наведении на текст он становится менее жирным, хотя в css это нигде не прописано.
код:

.element {
    text-decoration: none;
    font-weight: 400;
    font-size: 1.125rem;
    color: #fff;
    position: relative;
    transition: .1s;
}

.element:hover {
    color: #f00;
}

html:

<a href="/rules" class="element">
    <span>Правила</span>
</a>

Comments

[Lynn «Кофеман»]

Покажите скриншоты

[Ankhena]

А лучше живой пример на codepen.io
Пока делаете, найдете в чем дело.

[GR么ND]

https://codepen.io/worldlight009/pen/eYXXbqG

[GR么ND]

я нашел изза чего возникает данная проблема, дело в том что в хедере в css установлена высота, изза этого во всех остальных на сайте случилась такая проблема, когда закомментировал height у этого блока все стало нормально работать, с чем это может быть связано
UPD: так же даже если не устанавливать высоту но в блоке при этом будут любые элементы будет тот же самый баг, как это связано?

[GR么ND]

Ankhena, я залил код на codepen.io

[Ankhena]

GR么ND, я бы разбиралась с backdrop-filter

[GR么ND]

Ankhena, а что с ним не так?

Answer 1

[wervan]

У меня не возникает такая проблема, это чисто визуально, если ты поставишь цвет изначальный на зеленый, а ховер на белый, то белый будет типа больше, но нет. В итоге жирность не меняется, цвета играются просто

Comments

[GR么ND]

хорошо, спасибо, но как это исправить в моем прошлом хедере тоже был похожий навбар и там все с этим было в порядке на шрифте Oswald с белого на красный менялся все было нормально, но тут даже с этим шрифтом так происходит