Тексты с одинаковым цветовым кодом отличаются при загрузке с помощью AJAX

Question

Я работаю в интернет-магазине с зеленым в качестве основного цвета. Все отлично работает, но я заметил, что текст внутри загруженного ajax div выглядит ярче, чем должен быть. Обычный загруженный текст заметно менее яркий, но оба текста имеют одинаковый цветовой код.

Я не думаю, что смогу воспроизвести его здесь, не разместив весь файл CSS и HTML, но вот фрагмент кода HTMLтекст при обычной загрузке страницы:

<div class="primary-product-text vis-product-name">Knie-insteekkoppeling, kunststof zwart, M6</div>

И фрагмент динамически загружаемого содержимого:

<span class="primary-product-text">Knie insteekkoppeling, kunststof zwart, M6</span>

CSS:

.primary-product-text {
    color: #01a85e;
}

.vis-product-name {
    display: block;
    height: 38px;
}

Ссылка: https://www.technicomponents.nl/nl/p/pneumatiek/insteekkoppelingen/knie-koppelingen/ Показанные продукты имеют зеленый цвет. Если щелкнуть значок корзины рядом с товаром или выполнить поиск «knie», вы увидите, что тот же цветовой код дает более яркий зеленый цвет.

Answer 1

Это может быть визуализация в браузере. Я заметил, что, хотя CSS выглядит одинаково, пиксели не генерируются одинаково. Это может быть связано с тем, что шрифт относительно тонкий и включается -webkit-font-smoothing: antialiased;.

Глядя на него, я также понял, что текст во всплывающем окне отличается, пожалуйста, я бы предпочел использоватьточно такой же текст. (минус от Knie до insteekkoppeling)

(первая - веб-страница, вторая - во всплывающем окне)

Answer 2

Нашел ответ, это из-за CSS-анимации, которая вызвала некоторые проблемы с отображением текста. У меня было несколько CSS-анимаций, таких как преобразование и масштабирование контейнера и отдельных элементов div.

Решением было добавить следующий CSS-код в основной класс контейнера:

-webkit-backface-visibility:скрытый;