Mimosa live reload of CSS is not quite "live"

[Ken Carpenter]

I have a project with live reload enabled, and when I save HTML or JavaScript, the page reloads.

When I modify my styles.less file though, I can see that the new styles are, in fact, loaded by the browser (I can see them change in the Chrome Inspector), but the page itself does not actually update unless I either Alt-Tab over to Chrome or move my mouse over top of the Chrome window, even without changing to it.

It seems that somehow the expected repaint is not happening.

I noticed though, that if I save the same file twice, then the repaint happens without needing to Alt-Tab to or mouse over the Chrome window.

My browser is Chrome Version 35.0.1916.114 on the Mac.

I also just tried in Safari and it worked properly.

Is this a known issue?

Thanks,

Ken

[Ken Carpenter]

I found this Chrome Plugin that helps, although it does a full-reload for every CSS change:

• https://chrome.google.com/webstore/detail/mimosa-livereload/ilabemofohmfjciemambcomieohbchip/related
  
• https://github.com/ifraixedes/chrome-extension-mimosa-livereload
  

It's not ideal, but it should keep me happy.

Ken

[dbashford]

I've noticed this start happening too.  In this case its Chrome deciding what it thinks is the best time to perform the reload.  It is making the call, which works for any case that isn't a developer's, to not refresh the CSS if you aren't actually focused on the page.  It is likely a performance thing.  If you have 40 tabs open, Chrome won't do the work in the background on tabs that aren't in focus.

Few options:

- Is there a chrome://flags option to disable this?
- Reach out to the Chrome folks to possibly get a flag added if there isn't one?
- update mimosa-live-reload to perform full page reload with CSS in the event the browser is chrome.  Reloading the entire page for CSS changes sucks though.

[dbashford]

I hacked on this for awhile and found nothing. Then I moved on and tackled plenty of other things.  Came back to it tonight, still haven't found anything on the web, but came up with a solution.

https://github.com/dbashford/mimosa-live-reload/commit/ce3f386160cc7762fd14ea65cb89185e8ce726b9#diff-c4e5f622d342b925c66dd57ad21321e3R21

In the reload script I'm breaking the URL first (if its chrome) and then fixing it.  You get a 404 in the console, but that's something that can be explained away.  You get the desired result in the end.