-webkit-text-fill-color, что за сие чудо?

Question

[Onatskyi]

Здравствуйте, почему так происходит? Есть блок со свойством color: red;, и казалось, простое свойство, которое работает всюду, и чтобы тут могло пойти не так? Но, не все так просто. В браузере сафари, на айфоне, отказывалось оно работать. Цвет наследовался от родительского элемента. Остальные свойства работали на ура, и только цвет не хотел меняться. Я уже и не знал что делать. Но шурша гуглом все же нашел свойство -webkit-text-fill-color, и о Боги, оно заработало.

Так от вопрос, что это такое? Как от этого защититься? Всюду его прописывать рядом с color это уже дикость какая-то. В данный момент в свойствах я прописал вот такое:

* {
  -webkit-text-fill-color: currentcolor;
}

Но вряд ли это правильное решение. Если есть знающие люди, помогите, пожалуйста. А то я думал что хотя бы это знаю, а оно он как оказалось. Буржуйский браузер это нечто, прям как ie, только на минималках.

Для наглядности код который вызывал проблему в сафари:

<div class="content">
  <div class="text">
    <span class="colorred">текст</span>
  </div>
</div>

.content {
  color: #303030;
}
.text {
  color: inherit;
}
.colorred {
  color: red;
}

Цвет в итоге оставался черным. В остальных браузерах все на ура работало.

Заранее большое спасибо за помощь!

P. S. Добавлю, даже style="color: red;" не помогало.

Comments

[Сергей delphinpro]

А что говорит по этому поводу инспектор стилей для проблемного элемента?

[Onatskyi]

Сергей delphinpro, в отладчике браузера последнее свойство color установлено напрямую, и значение у него red style="color: red;". Тут дело было в свойстве -webkit-text-fill-color, приоритет у него больше. И оба отвечают за цвет текста. Всюду работает, и только тут не хотело. Ниже к ответам в комментариях я описал что да как.

[Onatskyi]

Сергей delphinpro, там стилей тех около двух десятков строчек. И + normalize в начале. Цвет указывался явно. До этого всюду color имел значение inherit. И только у body было color: #303030;.

Answer 1

[Rustam Bainazarov]

Проверяйте ваш CSS.

Таких проблем с простейшим свойством color никогда не было в Safari (и не только). Так что ищите проблему в CSS. Что-то переопределяет нужные вам свойства.

Скриншот результата работы вашего примера кода в iOS Safari. Закономерно — все в полном порядке:

Comments

[Onatskyi]

В отладчике браузера последнее свойство color установлено напрямую, и значение у него red. И всюду работает, во всех браузерах, и только на айфонах не хотело (на 2 телефонах проверил, 5рки). Проверять CSS? Я то проверил. color: inherit; всюду и только в body установлено color: #303030;. Не в этом дело. Не может же свойство color с любым селектором иметь приоритет больше чем style="color: red;"? Так же добавлю, что других свойств установлено не было.

Дело было в -webkit-text-fill-color, и приоритет у него больше чем у style="color: red;". По умолчанию свойство -webkit-text-fill-color наследует цвет у свойства color. Но по каким-то причинам это не сработало. И мне пришлось явно это указать в стилях -webkit-text-fill-color: currentcolor;. И тогда заработало.

В вашем случае оно может работать. А на других телефонах может и не заработать. А почему оно так происходит, не могу сказать. Может из-за того что шрифт Roboto подключен.

[Rustam Bainazarov]

Onatskyi, шрифт не влияет на свойство color и на механизмы его наследования.

Я гадать не буду, пришлите ссылку на проблемный проект. Проблема на 5 минут.

[Rustam Bainazarov]

Onatskyi, если хотите, можете мне в Telegram ссылку отправить, если стесняетесь выложить её сюда.

Answer 2

[Владимир Проскурин]

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

Comments

[Onatskyi]

В отладчике браузера последнее свойство color установлено напрямую, и значение у него red. И всюду работает, во всех браузерах, и только на айфонах не хотело (на 2 телефонах проверил, 5рки). Проверять CSS? Я то проверил. color: inherit; всюду и только в body установлено color: #303030;. Не в этом дело. Не может же свойство color с любым селектором иметь приоритет больше чем style="color: red;"? Так же добавлю, что других свойств установлено не было.

Дело было в -webkit-text-fill-color, и приоритет у него больше чем у style="color: red;". По умолчанию свойство -webkit-text-fill-color наследует цвет у свойства color. Но по каким-то причинам это не сработало. И мне пришлось явно это указать в стилях -webkit-text-fill-color: currentcolor;. И тогда заработало.