Vue вычисляет встроенные стили с динамическими переменными, не работающими в Safari / IE

Question

У меня есть динамические стили для элемента из вычисляемых переменных стилей.В стилях вычисляемых свойств я возвращаю css с переменными.В других браузерах это работает просто отлично, но в Safari или IE встроенный стиль

Элемент:

<button :style="styles" name="button"></button>

Стили вычисляемых переменных:

styles() {
 return {
      border: `${this.is('flat')?0:1}px solid ${_color.getColor(this.color,1)}`,
      background: this.hoverx?_color.getColor(this.color,.1):'transparent',
      color:_color.getColor(this.textColor,1) || _color.getColor(this.color,1)
 }
}

Вот как это выглядиткак в браузерах

Встроенный CSS элемента в Chrome:

Встроенный CSS элемента в Safari

Я обнаружил, что при предопределении свойства css все работает

styles() {
 return {
      border: `${this.is('flat')?0:1}px solid red`,
      background: this.hoverx?_color.getColor(this.color,.1):'transparent',
      color:'red'
 }
}

Встроенный CSS элемента в Safari (после удаления переменной)

Answer 1

Спасибо за ваши усилия.Я попытался разделить эти свойства, и все свойства отображаются в браузере, кроме свойства цвета.Но в конце концов я узнал, что кто-то передал цвет «rgb (0, 0, 0, 0.5)» (так что только rgb с альфа-каналом ?).В конце концов, пропущенная буква «а» вызывала проблемы с CSS.Chrome каким-то образом смог воспроизвести его как rgba, но другие браузеры не

Answer 2

В зависимости от версий Safari и IE, которые вы используете, возможно, что сокращение background свойство не поддерживается.

В то время как статически определенные стили обрабатываются во время сборки с postcss илиальтернатива в вашем проекте, динамически связанные стили не компилируются для совместимости с браузером.

Чтобы решить эту проблему, попробуйте разделить сокращенное свойство background на соответствующие стили.В приведенном выше примере достаточно только background-color:

return {
  backgroundColor: this.hoverx ? _color.getColor(this.color, 0.1) : 'transparent',
  // ... other styles
}

Если вам нужно перезаписать другие параметры фона, вы можете указать их индивидуально:

backgroundImage: 'none',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center center',
backgroundSize: 'cover'