brunch / auto-reload-brunch

Adds automatic browser reloading support to brunch.
88 stars 30 forks source link

Chrome doesn't update until mouseover #46

Closed trafnar closed 9 years ago

trafnar commented 10 years ago

I'm having this strange issue where stylesheet changes don't appear in Chrome until I move my mouse over the browser window or bring Chrome to the foreground.

In Safari, changes take place immediately. Changes that require a page refresh also happen immediately.

I'm using a OS X Mavericks with Chrome 36.0.1985.125

Any ideas what that's about?

es128 commented 10 years ago

I'm not sure of all the exact behaviors, but browsers do sometimes suspend or slow down js execution when a window or tab is inactive. It could be dependent on your particular system's available resources or other variable QoS types of considerations. Nothing we can really do about it in the plugin.

I'd suggest just getting quick with ⌘+tab. You could also try various things to see if they have any impact like seeing if Chrome Canary behaves any differently, reducing open windows/tabs, or plugging in to a power source if it's a laptop.

trafnar commented 10 years ago

Ok, thanks!

paulmillr commented 10 years ago

this is not a single issue — we had this one too I think. the solution is simple AFAIR

shreeve commented 10 years ago

Yes, I've seen this also. I have a quick solution, but the margin on this notebook in not big enough for me to include it.

paulmillr commented 10 years ago
// at the bottom of `stylesheet` method
// hack to force page repaint in latest Chrome
var el=document.body; el.style.display='none'; el.offsetHeight; el.style.display='block';

I wonder if there's a simpler solution.

es128 commented 10 years ago

Well, let's give it a shot then: 2c10830f99baef491ff237d6560efd64cd53f901

@trafnar try installing the latest master branch (npm install brunch/auto-reload-brunch) and let us know if it resolved the issue for you

trafnar commented 10 years ago

That works! I can't tell you how happy this makes me :)

andrejd commented 9 years ago

Solution wasn't working for me ... It needed some modification ...

setTimeout(function(){
        var el = document.body;
        var bodyDisplay = el.style.display || 'block';
        el.style.display = 'none';
        el.offsetHeight;
        el.style.display = bodyDisplay;
       },5);
es128 commented 9 years ago

Go ahead and submit a PR