.removeAttr('style') doesn't seem to work as expected on ipad

Question

Do anyone know why the CSS doesn't update on ipad if you use .removeAttr('style')?

Here's a quick example to show how I implemented my sprite switching:

CSS

nav li a { background: url('../img/sprites.gif'); }
nav li a#pizza { background-position: -40px -42px; }
nav li a#beer { background-position: -40px -82px; }
nav li a#spagetti { background-position: -40px -122px; }

Javascript

var $arr_nav_elements = $('nav li a');
$('nav li a').on('click', function(event) {
   //works fine on all modern browsers except ipad!
   $arr_nav_elements.removeAttr('style');

   var $arr_bg_pos = $(this).css('backgroundPosition').split(" ");
   //create "active" state on the current button  
   $(this).css('backgroundPosition', '0 '+$arr_bg_pos[1]); 
}

In the example above my button will change to the "active" state in my sprites.gif at first click, however the inline style applied by jQuery's css() won't be removed/updated on ipad after I click on any different buttons.

Any ideas?

Why using an each loop here? Could be: `$arr_nav_elements.removeAttr('style');` or `$arr_nav_elements.attr('style','')` — A. Wolff, Sep 19 '13 at 13:13
are you sure it works in all browsers? `ele.removeAttr('style');` shouldn't work because `ele` is just a native DOM element and doesn't have the method removeAttr — wirey00, Sep 19 '13 at 13:14
Sorry, I just wrote this example from my head. A.Wolff: yeah, thanks! removed the each() - should be correct now. :) — am_, Sep 19 '13 at 13:14
Sorry but instead of changing your code in question, try to test it. Maybe now it works and BTW we no more know which code you are using... So could you post the exact code you are using and which is not working??? — A. Wolff, Sep 19 '13 at 13:17
http://stackoverflow.com/a/5951416/1385672 <-- should help you — wirey00, Sep 19 '13 at 13:19
Thank you ᾠῗᵲᄐᶌ I'll have a look and see if that works. A.Wolff: the above code works, i just simplified it because the code I use is a lot more complicated. The only issue anyway is with .removeAttr('style') on ipad as explained in my question. — am_, Sep 19 '13 at 13:29
using css('backgroundPosition',''); instead of .removeAttr('style') worked! Thanks alot ᾠῗᵲᄐᶌ! - if you want to add it as an answer ill accept it. — am_, Sep 19 '13 at 13:36

am_ · Accepted Answer · 2013-09-23T14:12:34.197

2

Seems as if .removeAttr('style'); has some issues on ipad (prob. all ios devices)

As pointed out by A. Wolff and ᾠῗᵲᄐᶌ these alternatives work fine:

.attr('style','');
.css('backgroundPosition','');

edited Sep 23 '13 at 14:12

answered Sep 19 '13 at 13:46

am_

2,378
1
21
28

score 0 · Answer 2 · answered Sep 19 '13 at 13:13

0

hope this helps:

try something like this:

//replace the $.each(...) block with following
$('nav li a').each(function(){
    $(this).css('name','value'); //here you manually adjust your css styles
});

good luck in your project!

answered Sep 19 '13 at 13:13

what is sleep

916
4
12

.removeAttr('style') doesn't seem to work as expected on ipad

2 Answers2