2

My meteor app works as expected on the desktop, but has a slow mobile experience due to unnecessary total page refresh when changing routes.

I have tested my application on google dev tools using the "emulate touch screen" option and on a Galaxy S4 in mobile chrome. When I click buttons or links that trigger iron-router to route to a new route, the whole page will refresh instead of the one yield containing a template (i.e the header and footer reloads along with the tags. The whole page). What should happen, and what does happen on the desktop when the "emulate touch screen" option is not active and the buttons and links are clicked is normal behavior with very fast switching of templates in the {{ > yield }}. The rest of the page does not refresh, as expected. I am only aware that when the "emulate touch screen" option is active, first a touch start event is a triggered followed by a click event causing the whole page refresh.

Any ideas on what is causing this and how to fix it?

Some example code is the following:

//makes the button clicked make the page go back
'click .glyphicon-chevron-left' : function(e) {
e.preventDefault();
history.back();
};


// when clicked goes to a preference page
<a id='Preferences'  href="{{pathFor 'pref'}}" data-toggle="collapse"  data-target=".nav- collapse"> Preferences </a>

Using meteor version 0.9.0.1 with the following packages: insecure standard-app-packages iron-router spin iron-router-progress single-page-login accounts-ui accounts-password animate-css meteor natestrauser:connection-banner mizzao:bootstrap-3

Edit: Error was being caused by a non-package related 3rd party javascript file. Will update further if I can identify the specific cause of the problem.

Zleman1593
  • 41
  • 3
  • Hey, what happens if you disable `iron-router-progress`, and set a loading template? – nathan-m Aug 31 '14 at 09:58
  • @NathanM I just removed 'iron-router-progress'. I already had a loading template set, and now I actually see the loading template briefly on the desktop browser before content loads. I was not seeing it at all before. However, it did not solve the problem; It still reloads the entire page. Now upon reload, before even the loading template can run, I see the login box from the single-page-login flash quickly. Any other ideas? Thanks. – Zleman1593 Aug 31 '14 at 12:22
  • I also just removed 'single-page-login', but all that does is prevent the flash of the login box, which is instead replaced just by a longer duration of the spin template. So 'single-page-login' is not causing the problem and I will add that back. For whatever reason the touchstart events (which I am not using in my code) are causing the entire page to reload. – Zleman1593 Aug 31 '14 at 12:42
  • Hmm.. I would keep removing items until it works; as some cursory testing shows that iron-router works fine with touch events. – nathan-m Aug 31 '14 at 12:47
  • Update: @NathanM I have removed all packages except the following and am still having the issue: insecure standard-app-packages single-page-login accounts-ui accounts-password meteor mizzao:bootstrap-3 iron:router – Zleman1593 Aug 31 '14 at 16:56
  • Ok. I have fixed the issue. It was being caused by one javascript file I had added earlier. I will update further if I can figure out why it was causing the problem. Thanks for the suggestion @NathanM to just start removing things. – Zleman1593 Aug 31 '14 at 17:07
  • Good job! You should post an answer / accept it so people don't think the issue is unresolved. – nathan-m Aug 31 '14 at 22:45

2 Answers2

2

I fixed this with. 

Template.back.events({
        'click #back': function (evt) {
            window.history.back();
            evt.preventDefault();
        },
        'touchstart #back': function () {
            window.history.back();
            evt.preventDefault();
        }
    });

and 

Template.layout.events({
    'touchstart a': function (evt) {
        console.log(evt);
        evt.preventDefault();
        Router.go($(evt.currentTarget).attr('href'));
        return false
    }
});
Adel
  • 21
  • 1
0

I had the same problem. Just removed axw:ratchet package

Martin Turjak
  • 20,896
  • 5
  • 56
  • 76
Adel
  • 21
  • 1