Google Fastbutton not working on mobile Safari?

Question

I'm trying to implement Google's Fastbuttons described here for tables with a two-row layout.

The fastbuttons get bound on the table-rows with:

var buttons = document.getElementsByClassName('evtFastbutton');
for (var i = 0; i < buttons.length; i++) {
    var fastbutton = new FastButton(buttons[i], function () {
        var urlstr = 'xyz';
        window.location.href = (urlstr);
    });
}

If one of the rows is clicked it should change the background-color of either the previous or the next row and itself and open a new page.

While using Chrome or Firefox on Android or PC it all works great.

In Safari on the IPhone it is not changing the background-color but opens the new page.

I am not sure what is not working, the change of the background-color or the fastbutton.

Does anybody have had similar issues or a possible solution for this?

You can find the full code in this fiddle: http://jsfiddle.net/tofeld/9Lu54yrr/1/

PS: I already tried the solutions suggested at this question: Google FastButton clicks twice on iOS

Answer 1

I found the solution of my problem. As described here the rendering was not done before the javascript to change the page was executed.

So if anybody experiences a similar issue, try to do:

window.setTimeout(function(){window.location.href=('new/location');},0);

instead of

window.location.href=('new/location');