title: Chrome doesn't displays the dynamic css propery change by Jquery before Ajax sync call
body: <p>I have a tricky problem with Google Chrome Browser.</p>
  
  <p>I have the folowing HTML node:</p>
  
  <p><code>&lt;div class="result-req-chat pointer float-right" onclick="chat.addUser(this/*, other vars*/)" &gt;&lt;img src="/images/profile_icon_4.png" alt="" /&gt;&lt;/div&gt;</code></p>
  
  <p>On the click event it triggers the chat object's method </p>
  
  <pre><code>    this.addUser = function(trigger_node, id, is_silent, session, show_block_message){
      if(trigger_node){
          this.bk_trigger_node.html = trigger_node.innerHTML;
          this.bk_trigger_node.cn = trigger_node.className;
          trigger_node.innerHTML = '';
  
          jQuery(trigger_node).addClass("loader");
          jQuery(trigger_node).removeClass("bpurple");
          jQuery(trigger_node).removeClass("bgray");
          jQuery(trigger_node).removeClass("button");
      }
      //alert('if this is executed then it displays the previous changes of the node');
      if(trigger_node.innerHTML == ''){
          this.addUserToChat(id, is_silent, session, show_block_message);
      }
      if(trigger_node){
          trigger_node.innerHTML = this.bk_trigger_node.html;
          trigger_node.className =this.bk_trigger_node.cn;
      }
  }
  </code></pre>
  
  <p><code>addUserToChat()</code>:</p>
  
  <pre><code>    this.addUserToChat = function (id, is_silent, session, show_block_message){
      var response = this.chat_tabs.addTab(id, null);
      if(response.error){
          callUrl("/me/chat/remove-session/id/"+id);
          this.chat_tabs.removeTab(id);
          if(show_block_message) alert(response.message);
      }else{
  
          this.createTabsBar();
          if(!is_silent){
              this.switchTab(id);
              this.resetContainer(is_silent);
          }
          if(id == this.chat_tabs.active_tab){
              this.active_chat_obj.refresh(session);
          }
  
          if(this.closed){
              if(this.stop_check){
                  return;
              }
              this.resetContainer();
              this.switchTab(id);
          }
  
      callUrl("/me/chat/add-session/id/"+id);
      }
  }
  </code></pre>
  
  <p><code>chat_tabs.addTab():</code></p>
  
  <pre><code>    // creates and adds the a tab
  this.addTab = function(id,name,user_data,session){
      var exists = this.getTab(id);
      if(!exists){
  
          if(session){
              var user_session_id = session.id;
              var user_session_data = session.data;
          }else{
              var session = this.createSession(id);
              if(session.error){
                  return session;
              }
              var user_session_id = session.id;
              var user_session_data = session.data;
          }
          if(name){
              var user_name = name;
          }else{
              var user_name = this.getName(id);
          }
          if(user_data){
              var user_data = user_data;
          }else{
              var user_data = this.getData(id);
          }
  
          var ob = new Object({
              user_id: id,
              user_name: user_name,
              user_data: user_data,
              user_session_id: user_session_id,
              user_session_data: user_session_data,
              has_new:false,
              chat_screen: new ChatScreen(session, id, user_name, user_data, this.main_user_id, this.main_user_photo)
              });
  
          this.chat_users.push(ob);
          return ob;
      }else{
          return exists;
      }
  }
  </code></pre>
  
  <p><code>callUrl():</code></p>
  
  <pre><code>    function getUrl(url){
  return jQuery.ajax({ type: 'GET', url: url, async: false }).responseText;
  </code></pre>
  
  <p>}</p>
  
  <p>The point is that the method <code>addUserToChat()</code> contains a syncronous Ajax call.</p>
  
  <p>The problem with Chrome is that the <code>trigger_node</code> changes aren't displayed. If you watch with the built-in JS debuger then everithing goes ok ( even with displaying  ) .Also if you uncomment the alert.</p>
  
  <p>It runs on Mozilla ( latest version ).Also the Crome is the latest version.
  I can observe that in the time that it waits for the ajax response, the page is unresponsive to events like hovers, tips etc.</p>
  
  <p>Do you have any suggestions for this? How can I implement a workarround method?</p>