在 macOS/iOS 10 的 Safari 上看不到 pikabu 菜单

Question

我正在研究网页，我使用Pikabu创建了侧边菜单。问题是它适用于铬，火狐甚至边缘，但它不适用于野生动物园。我已经在桌面和移动版本上尝试过。我对皮卡布有点陌生，所以我很难找到这个问题。问题是当我在 safari 中打开页面时，我看不到任何东西，页面完全是白色的。我已经验证了兼容性，Pikabu 应该在 safari 10.0.2 上运行。

所以这是我的 HTML 代码

<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>

这是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;
                    }
                });
     });

Answer 1

它就像我发现了问题一样。当我玩Web检查器时，我注意到div.pikabu容器的高度为0。这就是为什么我在屏幕上看不到任何东西。我在堆栈溢出上搜索解决方案并找到此线程

这里解释了为什么Pikabu在Safari上表现不佳（解决方案的自动RE是Haxxxton）皮卡布 - 错误计算高度

在这里，您将找到对我有用的解决方案（解决方案的自动版本是Jai）移动野生动物园 $（窗口）.高度（） 网址栏差异

为了解决这个问题，我只将其添加到 may js 脚本中

var heightCorection = window.innerHeight ? window.innerHeight : $(window).height();
jQuery('.pikabu-viewport').height(heightCorection);
jQuery('.pikabu-container').height(heightCorection);