title: Workaround For Browser Redraw Bug When Using JQuery RemoveClass
body: <p>I have a table in my web app and I have implemented an event handler to allow the user to select data elements by clicking on a row within the table. To highlight the selected element visually I give it a border. When a new row is selected I remove the selected class (border) from the old element and add it to the new. </p>
  
  <p>My event listener code appears to be working correctly. I have verified using chrome's developer tools that the class is being removed from the old element and being added to the newly selected element. The browser however is not correctly removing the border after removeClass() has been called.</p>
  
  <p>When testing in chrome (18.0.1025.151) the newly selected element displays with a border and the previously selected element still shows part of the border (the bottom and right portions of the border are still drawn). A similar drawing bug occurs when I test in FF 11. In firefox the newly selected row only draws the left/right/bottom portions of the border the top does not display. An event (such as resizing the browser window) that results in a redraw fixes the border draw issue.</p>
  
  <p>Does anyone have information / links to the cause of the problem. More importantly is there a workaround I can implement after the user has selected a new row?</p>
  
  <p>CSS Class Being Added / Removed</p>
  
  <pre><code>.uiSelectedLHPlanRow { border: 1px solid purple; }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;table id='lhPlansTable' class='uiLHPlansTable'&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>(Table rows are added dynamically) TR Format:</p>
  
  <pre><code>'&lt;tr id=\'' + GENERATED ID + '\' class=\'uiLHPlanTableRow\'&gt;&lt;td class=\'uiLHPlanDriverTableCell\'&gt;' + GENERATED DATA1  + '&lt;/td&gt;&lt;td&gt;' + GENERATED DATA2 + '&lt;/td&gt;&lt;/tr&gt;'
  </code></pre>
  
  <p>EVENT HANDLER</p>
  
  <pre><code>$('#lhPlansTable').on('click', 'tr.uiLHPlanTableRow', function () {
  
      ... flow control ...
  
      $('.uiSelectedLHPlanRow').removeClass('uiSelectedLHPlanRow');
      $(this).addClass('uiSelectedLHPlanRow');
  
  
      // TODO: WORKAROUND FOR DRAWING BUG ??
  }
  </code></pre>