CODEWITHSUNDEEP
javascriptjquerycss
Ziggy
Ziggy

Reputation: 159

Double value added when setting background-repeat to repeat-x

I have a little strange problem compared with jQuery('.class').css(...);

jQuery('#ns-background-repeat').on('change', function(){
    //alert(jQuery(this).val());
    jQuery(this).css({ 'background-repeat' : jQuery(this).val() });
    jQuery('.test').text(  jQuery(this).css('background-repeat') );
});

Please let me know why it doesn't work: http://jsfiddle.net/eXa4y/2/

Chrome: http://gyazo.com/42cd909cc0b1c17023975f034e5a4728.

Firefox: http://gyazo.com/aa74f7e00fd898a7c43c2d7e44d0d17c - works well.

Upvotes: 0

Views: 95

Answers (1)

MikeM
MikeM

Reputation: 27405

this jsfiddle may help describe the situation

The result of each browser appears in agreement with the CSS3 spec for background-repeat

When setting $someElement.css({ 'background-repeat' : 'repeat-x' });

Chrome sets the style attribute to background-repeat: repeat no-repeat;

Firefox/IE set the style attribute to background-repeat: repeat-x;

(testing in latest versions of each browser Chrome 30, FF 24, IE 10)

The spec specifies

‘repeat-x’ Computes to ‘repeat no-repeat’.

So the two are technically equivalent, just different implementations.

repeat-x = x: repeat, y: no-repeat

Upvotes: 1

Related Questions