title: animate not working well in mobile safari on iPhone
body: <p>Hey i am creating tabbed content with a vertical tab list.
  I'm doing this by changing the background position.
  It's working fine in IE/CHROME but when browsing through safari on mobile device,
   the animation works well the first time and  the other times the background position drops down too much.</p>
  
  <p>I'm adding  alot of code, but i assume the problem is not with the HTML as this works in other browsers, i just published the code for refferance.</p>
  
  <p>This is my animation code :</p>
  
  <pre><code>&lt;!-- This part is responsible for tabbed content --&gt;
  
      var $tabbed_area = jQuery('#side-tabs-tab ul'),
          $tab_content = jQuery('.tab-content-tab');
  
  
  
  
  
                      if ($tabbed_area.length) {
  
              var animating = false,
                  divAnimated = false;
              jQuery('body.home #main-area-tab').css('backgroundImage','none');
              $tab_content.hide().filter(':first').show();
              $tabbed_area.css( {backgroundPosition: "0px 0px"} );
              var isFirstUse = true;
              $tabbed_area.find('li a').click(function(){
                  this_element = jQuery(this);
  
                  tab_order = this_element.parent('li').prevAll().length;
                  previouslyActiveTab = jQuery('.tab-content-tab').filter(':visible').prevAll('.tab-content-tab').length;
  
                  if ( (tab_order != previouslyActiveTab) &amp;&amp; !animating ) {
                      $tabbed_area.find('li a.activeTab').removeClass('activeTab');
                      var marginDelimeter = 177;
  
  
                      if( parseInt(jQuery.browser.version, 10) == 7){
                          marginDelimeter = 177;
                      }
  
                      activeTop = this_element.position().top - marginDelimeter;
                          if( navigator.userAgent.match(/iPhone/i)){
                          //marginDelimeter = 213;
  
                          }
                      animating = true;
                      var $visibleDiv = $tab_content.filter(':visible'),
                          $divToAnimate = $tab_content.filter(':eq('+tab_order+')');
  
  
                      $visibleDiv.fadeOut(500,function(){
                         $visibleDiv.css({opacity:0});
                         $divToAnimate.css({opacity:1}).fadeIn(500,function(){if (jQuery.browser.msie) this.style.removeAttribute('filter');});
                         divAnimated = true;
                      });
  
                      $tabbed_area.stop().animate({backgroundPosition:"(0px "+activeTop+"px)"}, 500,function(){
                          this_element.addClass('activeTab');
                          if (divAnimated) { 
                              animating = false;
                              divAnimated = false;
                          } else {
                              var wait = setInterval(function() {
                                  if (divAnimated) { 
                                      animating = false;
                                      divAnimated = false;
                                      clearInterval(wait);
                                  };
                              }, 100);
                          };
                      });
                  };
  
                  return false;
              });
          };
  &lt;!-- End of tabbed content --&gt;
  </code></pre>
  
  <p>This is the HTML :</p>
  
  <pre><code>   &lt;div id="side-tabs-tab"&gt;
      &lt;ul style='padding:0px; padding-bottom: 20px;'&gt;
          &lt;?php for ($i = 1; $i &lt;= $featured_num; $i++) { ?&gt;
              &lt;?php if ($arr[$i]["tabtitle"] == '') $arr[$i]["tabtitle"] = 'Tab Custom field'; ?&gt;
              &lt;li class="clearfix"&gt;&lt;a href="#" &lt;?php if ($i == 1) echo(' class="activeTab"'); ?&gt;&gt;&lt;?php if($arr[$i]["thumb"] &lt;&gt; '') echo('&lt;img src="'.esc_url( $arr[$i]["thumb"] ).'" alt="" width="36" height="37" /&gt;'); ?&gt;&lt;span&gt;&lt;?php echo( esc_html( $arr[$i]["tabtitle"] ) ); ?&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;?php }; ?&gt;
      &lt;/ul&gt;   
  &lt;/div&gt; &lt;!-- end #side-tabs --&gt;
  
  
  &lt;div id="main-area-tab"&gt;
      &lt;?php for ($i = 1; $i &lt;= $featured_num; $i++) { ?&gt;
          &lt;div class="tab-content-tab&lt;?php if ($i == 1) echo(' active'); ?&gt;"&gt;
              &lt;h2 class="title-tab"&gt;&lt;?php echo(esc_html($arr[$i]["title"])); ?&gt;&lt;/h2&gt;
              &lt;?php echo($arr[$i]["content"]); ?&gt;
              &lt;!--&lt;a href="&lt;?php echo esc_url($arr[$i]["permalink"]); ?&gt;" class="readmore-tab"&gt;&lt;span&gt;&lt;?php esc_html_e('Read More','MyAppTheme'); ?&gt;&lt;/span&gt;&lt;/a&gt; --&gt;
          &lt;/div&gt; &lt;!-- end .tab-content --&gt;
      &lt;?php }; ?&gt;
  &lt;/div&gt; &lt;!-- end #main-area --&gt;
  </code></pre>
  
  <p>It's a bit messy with all the PHP involved, but assume this outputs everything well.</p>
  
  <p>and finally CSS :</p>
  
  <pre><code>   #side-tabs-tab {background:url(images/tabs-shadow-tab.png) no-repeat scroll 116px 0 transparent; float: left; width: 205px; height: 353px; margin-top: -3px; }
      #side-tabs-tab ul {list-style: none; margin-top: 43px; margin-left: 12px; font-size: 16px; background:url(images/arrow-tab.png) no-repeat; padding-bottom: 20px; }
                  #side-tabs-tab ul li { margin-bottom: 10px; height: 40px; }
                      #side-tabs-tab ul li a {text-decoration: none; color: #202d37; text-shadow: 1px 1px 0px #e7eff2; display: block}
                          #side-tabs-tab ul li a img {padding-top: 3px; padding-left: 4px; float: left;}
                          #side-tabs-tab ul li a span {padding-left: 14px; float: left; display: block; padding-top: 12px;}
                      #side-tabs-tab ul li a.activeTab  {width: 191px; color: #ffffff; text-shadow: 1px 1px 0px #3a515a; }
  
          #main-area-tab {float: left; margin-top: 50px; margin-left: 29px; width:483px;} 
              #main-area-tab p { line-height: 18px; }
              #main-area-tab .tab-content-tab {width: 424px;padding-right:45px;}
                  #main-area-tab .tab-content-tab h2.title-tab {font-weight: bold; font-size: 20px; margin-bottom: 20px; }
                  #main-area-tab .tab-content-tab p.post {line-height: 18px; padding-bottom: 23px; padding-top: 20px;}
  
                  blockquote {background: url(images/blockquote-tab.png) no-repeat; border: none; margin: 0px; padding-left: 55px;line-height: 18px; color: #202d37; text-shadow: 1px 1px 0px #e7ecee; padding-top: 12px; padding-bottom: 22px; background-position: 0px 15px; }
  
                  #main-area-tab a.readmore-tab { background: url(images/readmore-left-tab.png) no-repeat top right; display: block; height: 33px; padding-right: 18px; line-height: 35px; float: right; font-weight: bold; text-shadow: 1px 1px 0px #2d3a40; font-size: 11px; margin-bottom: 26px; margin-right: -36px; float: right; color: #c0cfd5;}
                      #main-area-tab a.readmore-tab span { display: block; background: url(images/readmore-right-tab.png) no-repeat; padding:0 6px 0 13px; height:33px; }
  </code></pre>
  
  <p>Can someone tell me what am i doing wrong?</p>
  
  <p>If you fail to understand what i mean, you can view it live in <a href="http://www.eric.co.il" rel="nofollow">Here</a>, go in and click on development services.</p>