css - проблема с webkit-text-fill-color в последней версии Chrome

Question

Найдите это https://jsfiddle.net/91famhuv/8/

Я использую webkit-text-fill-color и webkit-gradient, чтобы придать эффекту прогрессивного градиента текст описания.На самом деле код имеет кнопку «Показать больше», и при нажатии на эту кнопку будет отображено полное описание.Первоначально, только несколько строк были видны с эффектом градиента.

Теперь, это работало правильно до обновления google chrome до последней версии.После обновления хрома начальный текст описания не появляется.Я могу выделить текст мышью, но он не виден.

Даже в скрипке вы можете выделить текст рядом с «Описание» мышью, который по умолчанию не виден.

Есть ли проблема с последним google chrome или с webkit-text-fill-color?И как это решить?

Answer 1

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

Чтобы решить вашу проблему, хотя,Вы можете изменить правило:

    .description .info-cell {
        background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#242424));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

На простое:

    .description-text {
        background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#242424));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

Изменение этого в вашем JSFiddle сработало для меня, так что это обходной путь, пока существует эта ошибка.

Answer 2

Ознакомьтесь с веб-документацией MDN: -webkit-text-fill-color

Нестандартный Эта функция является нестандартной и являетсяне на стандартном треке.Не используйте его на рабочих сайтах, выходящих в Интернет: он не будет работать для каждого пользователя.Также могут быть большие несовместимости между реализациями, и поведение может измениться в будущем.

Если вы нашли какую-либо альтернативу, я возьму ее.