Почему css "all: unset" работает странно в браузере Safari для MacOS? - PullRequest
Новая
       31

Почему css "all: unset" работает странно в браузере Safari для MacOS?

1 голос
/ 22 мая 2019

Таким образом, в основном я сделал эту ситуацию, у родителя есть css all: unset.

Затем я замечаю, что когда я использую Safari (Версия 12.1.1 (14607.2.6.1.1)), все дочерние элементы этого цвета могут быть затронуты только *Блок 1005 *, даже не встроенный или !important.

Но так ведет себя только color, как вы можете видеть, background-color использует свое собственное свойство.

Но это работаетнормально в Chrome, это глюк в сафари или я что-то не так сделал?И как я могу это исправить в Safari? 

* {
  color: red;                   /* Text color is using this one */
  background-color: pink;
}

.Parent {
  all: unset;
}

.Child {
  color: blue;
  background-color: yellow;     /* Background color is using this one */
}
<div class="Parent">
  <div class="Child">Some Text</div>
</div>

  • Ожидаемый результат (хром) enter image description here

  • Неверный результат (Safari Version 12.1.1 (14607.2.6.1.1)) enter image description here

1 Ответ

1 голос
/ 24 мая 2019

Safari использует специальное свойство -webkit-text-fill-color.Если вы используете это, цвет работает: 

* {
  color: red;                   /* Text color is using this one */
  background-color: pink;
  -webkit-text-fill-color: red;
}

.Parent {
  all: unset;
}

.Child {
  color: blue;
  background-color: yellow;     /* Background color is using this one */
  -webkit-text-fill-color: blue;
}
<div class="Parent">
  <div class="Child">Some Text</div>
</div>
...