title: How to force browser repaint and avoid UI update delay?
body: <p>I need the browser to update my UI before a long(er) operation is done. Currently the browser is waiting until after everything is complete and then updating the UI, which means UI freezes for 1-2 seconds then updates.</p>
  
  <p>So, user clicks button in UI, then this code executes:</p>
  
  <pre><code>$('#mybutton').click(function(e) {
  
  e.preventDefault();// prevent the default anchor functionality
  
  $('#mainctrldiv').css('display', 'none');
  $('#otherctrldiv').css('display', 'block');
  
  var img = $('&lt;img id="spareimg" style="display:none;"&gt;');
  img.attr('src', canvas.getActiveObject().toDataURL()); // This is causing the delay!
  img.appendTo('body');
  }
  </code></pre>
  
  <p>It's the <code>canvas.getActiveObject().toDataURL()</code> (a FabricJS function) that is taking the time. I want this to happen after the 2 divs have been visibly displayed to the user, to they don't notice. Need this to work in all commonly used browsers out there! (mobile as well as desktop).</p>
  
  <p>Research suggested that reading the css display properties immediately after setting them would force the browser to repaint so I added in the following code straight after setting these properties but the delay still occurred:</p>
  
  <pre><code>$('#mainctrldiv').css('display');
  $('#otherctrldiv').css('display');
  </code></pre>
  
  <p>Many thanks for any suggestions!</p>