How can i prevent tabstrip footer blinking when load a remote view?

[Orlando]

hi,

Please advise....How can i prevent tabstrip footer blinking when i load a remote view? any trick?

This is my remote view:

<div data-role="view" id="order_list_mobile" data-layout="mobile-tabstrip" data-title="<?php echo $this->language->get('text_sale');?>"  data-reload="true" data-show="afterShow">
    <header data-role="header">
        <div data-role="navbar">
            <a data-role="backbutton" data-align="left">Back</a>
            <span data-role="view-title"><?php echo $this->language->get('text_sale');?></span>
        </div>
    </header>
    <ul data-role="listview" data-style="inset" data-type="group" class="inboxList">
        <li>
            <?php echo $this->language->get('text_sale');?>
            <ul>
                <?php if ($orders) { ?>
                        <?php $id = 0;?>
                        <?php foreach ($orders as $order) { ?>
                            <li>
                                <h3 class="time"><?php echo $order['customer']; ?></h3>
                                <h3><?php echo $order['date_added']; ?></h3>
                                <h3><?php echo $order['total']; ?></h3>
                                <p><?php echo $order['date_added']; ?></p>

                                <?php foreach ($order['action'] as $action) { ?>
                                    <a data-role="button" href="<?php echo $action['href'];?>">
                                        <?php echo $action['text']; ?>
                                    </a>
                                <?php } ?>

                            </li>
                        <?php } ?>

                <?php } ?>
            </ul>
        </li>
    </ul>
</div>

<script>
    function afterShow(e) {
        var tabstrip = e.view.footer.find(".km-tabstrip").data("kendoMobileTabStrip");
            tabstrip.switchTo(2);
    }
</script>

And this is my footer that  initialized just one time:

<div data-role="layout" data-id="mobile-tabstrip">
    <header data-role="header">
        <div data-role="navbar">
            <a data-align="left" data-role="backbutton" class="nav-button"><?php echo $this->language->get('button_back');?></a>
            <span data-role="view-title"></span>
            <a data-align="right" data-role="button" class="nav-button" href="#index" data-icon="refresh"></a>
        </div>
    </header>
    <div data-role="footer">
        <div data-role="tabstrip" id="myTabStrip">
            <a href="#tabstrip-home" data-icon="recents"><?php echo $this->language->get('tab_general');?></a>
            <a href="#index.php?route=catalog/product&token=<?php echo $this->session->data['token'];?>" data-icon="cart"><?php echo $this->language->get('text_catalog');?></a>
            <a href="#index.php?route=sale/order&token=<?php echo $this->session->data['token'];?>" data-icon="bookmarks"><?php echo $this->language->get('text_sale');?></a>
            <a href="#tabstrip-settings" data-icon="settings"><?php echo $this->language->get('text_setting');?></a>
        </div>
    </div>
</div>

Please see the video with my problem:

http://www.youtube.com/watch?v=OI8pkYXC6rk

[Orlando]

My problem on video:
http://www.youtube.com/watch?v=OI8pkYXC6rk

[Kiril Nikolov]

Hi Orlando,

Thank you very much for bringing this to our attention.

I have managed to reproduce the issue that you are describing. But in order to provide you with a fix, we will need some more time to investigate in more details. As soon as we have more information, we will get back to you.

Thank you very much for your patience and understanding.

Regards,
Kiril Nikolov
Telerik

[Orlando]

Hi again:

I can confirm that is a Chrome Browser problem. Tested on device and works fine!

[Petyo]

Hi Orlando,

thank you very much for sharing your finding. Indeed, such behavior may be browser specific. In case you face some other problems of such kind, do not hesitate to re-open this thread. 

Regards,
Petyo
Telerik