Пользовательские свойства CSS не работают правильно с текстовой тенью - PullRequest
Новая
       52

Пользовательские свойства CSS не работают правильно с текстовой тенью

0 голосов
/ 05 марта 2019

У меня есть этот код, я пытаюсь применить тени к тексту, используя переменные css. 

:root {
  --color-primary: #03a9f4;
  --color-primary-rgb: 3, 169, 244;
}

.ms-logo-white {
      color: var(--color-primary);
      background-color: #fff;
      text-shadow: 1px 1px 0 rgba(var(--color-primary-rgb), 0.05),
              1px 2px 0 rgba(var(--color-primary-rgb), 0.05),
              1px 3px 0 rgba(var(--color-primary-rgb), 0.05),
              2px 4px 0 rgba(var(--color-primary-rgb), 0.05),
              3px 5px 0 rgba(var(--color-primary-rgb), 0.05),
              4px 6px 0 rgba(var(--color-primary-rgb), 0.05),
              5px 7px 0 rgba(var(--color-primary-rgb), 0.05),
              6px 8px 0 rgba(var(--color-primary-rgb), 0.05),
              7px 9px 0 rgba(var(--color-primary-rgb), 0.05),
              8px 10px 0 rgba(var(--color-primary-rgb), 0.05),
              9px 11px 0 rgba(var(--color-primary-rgb), 0.05),
              10px 12px 0 rgba(var(--color-primary-rgb), 0.05),
              11px 13px 0 rgba(var(--color-primary-rgb), 0.05),
              12px 14px 0 rgba(var(--color-primary-rgb), 0.05),
              13px 15px 0 rgba(var(--color-primary-rgb), 0.05),
              14px 16px 0 rgba(var(--color-primary-rgb), 0.05),
              15px 17px 0 rgba(var(--color-primary-rgb), 0.05),
              16px 18px 0 rgba(var(--color-primary-rgb), 0.05),
              17px 19px 0 rgba(var(--color-primary-rgb), 0.05),
              18px 20px 0 rgba(var(--color-primary-rgb), 0.05),
              19px 21px 0 rgba(var(--color-primary-rgb), 0.05),
              20px 22px 0 rgba(var(--color-primary-rgb), 0.05),
              21px 23px 0 rgba(var(--color-primary-rgb), 0.05);
  }

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

1 Ответ

0 голосов
/ 05 марта 2019

Я нашел решение.Если вы определяете промежуточную переменную, она работает. 

:root {
  --color-primary: #03a9f4;
  --color-primary-rgb: 3, 169, 244;
}

&.ms-logo-white {
      --color-shadow: rgba(var(--color-primary-rgb), 0.05);
      color: var(--color-primary);
      background-color: #fff;
      text-shadow: 1px 1px 0 var(--color-shadow),
              1px 2px 0 var(--color-shadow),
              1px 3px 0 var(--color-shadow),
              2px 4px 0 var(--color-shadow),
              3px 5px 0 var(--color-shadow),
              4px 6px 0 var(--color-shadow),
              5px 7px 0 var(--color-shadow),
              6px 8px 0 var(--color-shadow),
              7px 9px 0 var(--color-shadow),
              8px 10px 0 var(--color-shadow),
              9px 11px 0 var(--color-shadow),
              10px 12px 0 var(--color-shadow),
              11px 13px 0 var(--color-shadow),
              12px 14px 0 var(--color-shadow),
              13px 15px 0 var(--color-shadow),
              14px 16px 0 var(--color-shadow),
              15px 17px 0 var(--color-shadow),
              16px 18px 0 var(--color-shadow),
              17px 19px 0 var(--color-shadow),
              18px 20px 0 var(--color-shadow),
              19px 21px 0 var(--color-shadow),
              20px 22px 0 var(--color-shadow),
              21px 23px 0 var(--color-shadow);
  }

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

...