Can't see pikabu menu on Safari in macOS/iOS 10

Question

I am working on web page , and I have used Pikabu to created side menus. The problem is that it works fine with chromium , firefox and even edge, but it doesn't work with safari. I have tried on both desktop and mobile versions. I am kinda new to Pikabu, so I have trouble with finding the issue. The problem is that when I open the page in safari I can't see a thing, the page is completely white. I already verify the compatibility, Pikabu should run on safari 10.0.2.

so here is my html code

<div class="pikabu-container">
        <!-- Overlay is needed to have a big click area to close the sidebars -->
        <div class="pikabu-overlay"></div>

        <div id="container">

            <div id="navigation-bar">
                <div class="navigation-icons">

                    <a class="pikabu-nav-toggle" data-role="left"><i class="fa fa-bars" aria-hidden="true"></i></a>

                    .. some php code here
                    <a class="pikabu-nav-toggle" data-role="right"><i class="fa fa-info" aria-hidden="true"></i></a>

                </div>
            </div>

            <div id="id1"></div>

            <div id="id2"></div>

            <!-- Additional controls -->
            ... irrelevan php code

</div>

</div>
<!-- the right sidebar -->
<div class="pikabu-sidebar pikabu-sidebar--right">
        <!-- right sidebar content -->
        <div class="container-content">
            <h2>Link</h2>
            <div class="container-link">
                <ul>
                    <li>
                        <div class="icon"><i class="fa fa-globe" aria-hidden="true"></i></div>
                        <div class="content"><a href="#">Product Homepage</a><span>Visit the product homepage.</span></div>
                    </li>
                    <li>
                        <div class="icon"><i class="fa fa-youtube-play" aria-hidden="true"></i></div>
                        <div class="content"><a href="#">Youtube</a><span>View informative videos about the product.</span></div>
                    </li>
                </ul>
            </div>

            <h2>Info</h2>
            <div class="container-info">

            </div>
        </div>
</div>

</div>

here is javascript

jQuery(function() {
         pikabu = new Pikabu();

         var open = false;
                jQuery('#explode-footer-Button').click(function () {
                    if(open === false) {
                        if(Modernizr.csstransitions) {
                            jQuery('#explode-footer-Content').addClass('open');
                        } else {
                            jQuery('#explode-footer-Content').animate({ height: '175px' });
                        }
                        jQuery(this).css('backgroundPosition', 'bottom left');
                        open = true;
              info_check = false;
                    } else {
                        if(Modernizr.csstransitions) {
                            jQuery('#explode-footer-Content').removeClass('open');
                        } else {
                            jQuery('#explode-footer-Content').animate({ height: '0px' });
                        }
                        jQuery(this).css('backgroundPosition', 'top left');
                        open = false;
              info_check = true;
                    }
                });
     });

score 0 · Accepted Answer · edited May 23 '17 at 12:16

It seams like I have found the issue. When I was playing around with web inspector, I noticed that the height of the div.pikabu-container is to 0. This is why I could see nothing on the screen. I search here on stackoverflow for the solution and find this threads

here is explained why pikabu doesn't perform well on safari ( the autore of the solution is haxxxton ) Pikabu - Miscalculating Height

and here you will find the solution that worked for me (the autore of the solution is Jai) Mobile Safari $(window).height() URL bar discrepancy

To fix this issue I only added this to may js script

var heightCorection = window.innerHeight ? window.innerHeight : $(window).height();

jQuery('.pikabu-viewport').height(heightCorection);
jQuery('.pikabu-container').height(heightCorection);

Can't see pikabu menu on Safari in macOS/iOS 10

1 Answers1