Adding and then removing "background" from style attribute creates unwanted styles

[WickyNilliams]

I have an element and depending on some condition, may set it's background. If the condition is first true, and later false the element is left with some "residual" styles that were never set in code.

Output looks like:

<!-- condition true -->
<div style="background: #ff0000"></div>

<!-- then when condition is false -->
<div style="background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial;"></div>

These styles were never set by user code, and are interfering with styles in my CSS.

Here's a fiddle showing the issue: http://jsfiddle.net/tfKYJ/78/

[syranide]

👍 For posterity, this is probably the IE8 workaround that back-fires, but haven't actually verified.

EDIT: This is really weird, the IE8 workaround should actually fix this it seems, but doesn't for some reason...

[WickyNilliams]

Interestingly, doesn't happen in safari, but FF is affected (however different values for CSS properties):

<div style="background-attachment: scroll; background-clip: border-box; background-origin: padding-box; background-size: auto auto;"></div>

[syranide]

Highlights the problem without diving into the markup: http://jsfiddle.net/wc95h405/

[sophiebits]

The issue here is that we only unset background image, position, repeat, and color and not attachment, clip, origin, or size. Not sure where I came up with that original list. I think the best course of action here is to make sure we unset all the properties that IE8 supports, then take your #1953. These shorthand properties are kind of a pain. :)