title: website with jQuery super slow firefox 4 and almost static Safari all others fine
body: <p>when load website in IE, Chrome, and Orpera the jQuery on hover events work smooth and seamless</p>
  
  <p>when I load website in firefox 4, I don't know older versions, perhaps, and Safari, the website is slow</p>
  
  <p>in firefox, there is a lag of like 1 second after mouse has hover over item</p>
  
  <p>in safari, the whole browser becomes almost static, even outside the page, the browser itself. </p>
  
  <p>Could you tell me what can I change to fix this?</p>
  
  <p>sample website: <a href="http://filetaxes4free.com/temporary/" rel="nofollow">http://filetaxes4free.com/temporary/</a></p>
  
  <p>aside from the jQuery being called from googel apis, this is the Jquery I wrote:</p>
  
  <pre><code>//set wrapper hegiht based on browser window
  window.onload = setHeight;function setHeight(){ var minWidth = 0;var minHeight = 0;
      if (typeof screen.availHeight != 'undefined'){minWidth = screen.availWidth+"px"; minHeight = screen.availHeight+"px";}
      document.getElementById("leftBodyWrapper").style.minHeight = minHeight; return true;}
  
  jQuery(document).ready( function() {
  //tabs
      jQuery( "#tabs" ).tabs().tabs({  fx: { opacity: 'toggle', duration: 1000 }}).tabs('rotate', 3500, false);
  //change image on hover
      jQuery("img.tabImg", jQuery('#tabs')).hover(
          function(event) {jQuery(this).attr("src", jQuery(this).attr("src").replace(".png","-active.png"));},
          function(event) { jQuery(this).attr("src", jQuery(this).attr("src").replace("-active.png",".png"));
      });
  //slide menu items on hover and change color of item    
      jQuery('a', jQuery('.slideMenu')).hover(
          function(event) {jQuery(this).animate({ paddingLeft: "15px" }, 300 )
          if(jQuery(this).parent().hasClass('current'))
              jQuery(this).css("color", "#307F73"); 
          else jQuery(this).css("color", "#307F73");},
          function(event) {jQuery(this).animate({ paddingLeft: "0" }, 300 );
          if(jQuery(this).parent().hasClass('current'))
              jQuery(this).css("color", "#307F73"); 
          else jQuery(this).css("color", "#4DCCB8");});
  //load PIEcss is IE
      if(navigator.appName=='Microsoft Internet Explorer'){
          if (window.PIE) {jQuery('.roundRightEI').each(function() {PIE.attach(this);});}}
  });
  </code></pre>
  
  <p>Thank you,</p>
  
  <p>UPDATE!!!</p>
  
  <p>After deconstructing and building back this website, I realized that the CSS for Safari and Firefox is the cause of the slow down. Nothing to do with jQuery or the fonts. If I do not load the CSS, everything runs as it should.</p>
  
  <p>So now, I am onto what part of the CSS is bugging the browsers. I am not sure if I should pos the CSS here.</p>
  
  <p>UPDATE</p>
  
  <p>OK, this is what is causing the slow down in both safari and firefox:</p>
  
  <p>div#container {</p>
  
  <pre><code>-moz-box-shadow: inset 0 0 200px 0 #6bcccb;
  -webkit-box-shadow: inset 0 0 200px 0 #6bcccb;
  box-shadow: inset 0 0 200px 0 #6bcccb;
  </code></pre>
  
  <p>}</p>
  
  <p>but if I do</p>
  
  <p>div#container {</p>
  
  <pre><code>-moz-box-shadow: 0 0 200px 0 #6bcccb;
  -webkit-box-shadow: 0 0 200px 0 #6bcccb;
  box-shadow: 0 0 200px 0 #6bcccb;
  </code></pre>
  
  <p>}</p>
  
  <p>everything is smooth (of course, I want inset shadow)</p>
  
  <p>UPDATE</p>
  
  <p>AND the problem WAS the long inset shadow. </p>
  
  <p>200px</p>
  
  <p>if I use a 5px inset shadow all is well...</p>
  
  <p>I am baffled... </p>