Изменение свойства фона через jQuery вызывает проблемы в Safari

Question

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

Испытание довольно просто, вот немного скрипки:

function clickme() { 
 
\t $('.container').css('background', "red"); 
 
}

.container { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"></div> 
 
<button onclick="clickme();">Click me!</button>

Вы увидите, что в Chrome или Firefox, это добавит background: red, как и следовало ожидать, в настоящее время в Safari добавляет это:

style="background-color: red; background-position: initial initial; background-repeat: initial initial;" 

Это вызывает у меня проблемы, не позволяя мне переопределить заранее определенный стиль CSS background-image, мне нужно установить фон: '#color' обязательный. В противном случае background-image всегда будет над background-color, хотя он встроен в элемент. Сафари сейчас не мой друг.

Есть ли в этом решение? Буду премного благодарен.

Заранее спасибо.

Answer 1

Похоже на проблему, используя стенографию background свойство inline. Попробуйте отделить свойство сокращенная background из его индивидуальных свойств:

$('.container').css('background-color', 'red'); 

Или вы можете попробовать использовать класс с background собственности:

.bg { 
    background: red 
} 

$('.container').addClass('bg');