Hej!
Buduję sklep na prestashop. Mam już szablon i wszystko działa ok ale zauważyłem, że na urządzeniach mobilnych na iOs czasami rozjezdza się header.

Wygląda to tak, że prawidłowy widok to taki:

screenshot-20180729224157.png

Kiedy odświeżam stronę, raz na jakiś czas sam header się rozjeżdza i wygląda wtedy tak:

screenshot-20180729224302.png

Znika logo a ikonki się rozjeżdzają. Kiedy odswieze strone wszystko wraca do normy ale za ktoryms odswiezeniem znowu jest cos nie tak. Walczylem dzisiaj z tym caly dzien ale nie doszedlem do tego co jest nie tak. Poniżej wklejam fragment kodu:

                    {block name='header_nav'}
                            <nav class="header-nav">
                                    <div class="right-nav">
                                    {hook h='displayNav2'}

                                            <div class="hidden-md-up text-xs-center mobile">
                                                    <div class="pull-xs-left" id="menu-icon">
                                                            <i class="material-icons"></i>
                                                    </div>

                                                    <div class="pull-xs-right" id="_mobile_cart"></div>
                                                    <div class="pull-xs-right" id="_mobile_user_info"></div>
                                                    <div class="top-logo" id="_mobile_logo"></div>
                                                    <div class="clearfix"></div>
                                            </div>          
                                    </div>  
                            </div>
                            </nav>

    </div>    

                                            <div id="mobile_top_menu_wrapper" class="row hidden-md-up" style="display:none;">
                                                    <div class="js-top-menu mobile" id="_mobile_top_menu"></div>
                                                    <div class="js-top-menu-bottom">
                                                            <div id="_mobile_currency_selector"></div>
                                                            <div id="_mobile_language_selector"></div>
                                                            <div id="_mobile_contact_link"></div>
                                                    </div>
                                            </div>
                    {/block}

</div>
</div>

{/block}

Nie wrzucilem calosc bo wczesniejszy kod odpowiada za desktop a tam jest ok. {hook h='displayNav2'} to jakis hook odpowiadajacy za dodanie trzech ikon z prawej strony.

Wydaje mi sie, ze za problem odpowiada konkretnie ten fragment:

<div class="pull-xs-right" id="_mobile_cart"></div>
<div class="pull-xs-right" id="_mobile_user_info"></div>
<div class="top-logo" id="_mobile_logo"></div>
<div class="clearfix"></div>

pull-xs-right w css to po prostu float:right, kiedy to usune to ikonki rozjezdzaja sie identycznie jak na iOs. Wrzucilem tez szablon na testowy serwer gdyby ktos chcial rzucic okiem w zywy kod.

Przy scrollowaniu w dol header zostaje zafixowany i o dziwo nawet kiedy ikonki byly rozjechane to wszystko wraca na swoje miejsce :O

nuts.nazwa.pl/presta

Bardzo Was prosze o pomoc :)