title: Force UI repaint in Webkit (Safari & Chrome) right before Synchronous "Ajax" request
body: <p>In a simple Ajax based website we are making some HttpRequests requests synchronously (I realize "synchronous Ajax" is somewhat of an oxymoron).  The primary reason this is being done synchronously vs. asynchronously is in order to simplify the programming model for some of those involved (long story).</p>
  
  <p>Anyway, we want to be able to make a styling change (specifically, overlay the screen with semi transparent white as Google search does) right before the request is made, and then take it away when results come back.  Essentially this looks like:</p>
  
  <pre><code>load:function(url) {
      ....
      busyMask.className="Shown"; //display=block; absolute positioned full screen semi-transparent
      var dta=$.ajax({type:"GET",dataType:"json",url:url,async: false}).responseText;
      busyMask.className="Hidden"; //sets display=none;
      ...
      return JSON.parse(dta);
      }
  </code></pre>
  
  <p>It is well known a synchronous requests will lock the UI.  So not surprisingly, the white overlay never shows up in Safari and Chrome (it does in Firefox interestingly).  I've tried slowing the response way down and using a pink overlay so that it will be painfully obvious, but it just won't update the UI until after the request is complete.  Leaving the 'busyMask.className="Hidden"' part out will show the mask-- but only after the ajax request is complete.</p>
  
  <p>I've seen many many tricks for forcing the UI to repaint (e.g. <a href="https://stackoverflow.com/questions/924681/why-hourglass-not-working-with-synchronous-ajax-request-in-google-chrome">Why HourGlass not working with synchronous AJAX request in Google Chrome?</a>, <a href="http://ajaxian.com/archives/forcing-a-ui-redraw-from-javascript" rel="nofollow noreferrer">http://ajaxian.com/archives/forcing-a-ui-redraw-from-javascript</a>), but they all seem to be in conjunction with trying to show actual "permanent" DOM or styling updates, not with temporarily showing a style change while a synchronous request is made.</p>
  
  <p>So is there a way to do this or am I fighting a losing battle?  It may be that we'll just need to switch to asynchronous requests on a case by case basis for the worst performing requests, which might be a decent way to tackle the learning curve issue...  But I'm hoping there is an outside the box answer here.</p>