iOS设备未显示基础CSS菜单

时间:2015-12-01 01:05:19

标签: html ios css zurb-foundation mobile-safari

我正在使用基础CSS来使网站具有移动响应能力。部分原因是在任何移动设备上查看时左侧打开的菜单。菜单在所有平台上看起来都很棒除了iOS设备上的Safari 。每当我点击我的应用程序上的汉堡包图标时,画布外菜单就会打开,但内容为空。 基础核心版本为5.4.5

以下是菜单的HTML代码。

<header id="header">
    <nav class="tab-bar header hide-for-large-up" data-options="is_hover: false" data-topbar="" role="navigation">
        <section aria-expanded="false" class="left-small left-off-canvas-toggle">
            <div class="fi-list"></div>
        </section>
        <section class="middle tab-bar-section">
            <a class="name" href="/" title="My App">My App</a>
        </section>
        <section class="right-small tab-header search" id="search">
            <div class="fi-magnifying-glass"></div>
        </section>
    </nav>
    <aside class="left-off-canvas-menu">
        <ul class="off-canvas-list">
            <li>
                <label>Personal Care</label>
                <div class="container">
                    <a href="/categories/152642-after-shave-reviews-and-ratings">After Shave</a>
                    <a href="/categories/261594-body-wash-cleanser-reviews-and-ratings">Body Wash &amp; Cleanser</a>
                </div>
            </li>
            <li>
                <label>Food</label>
                <div class="container">
                    <a href="/categories/255744-breads-baked-goods-reviews-and-ratings">Breads &amp; Baked Goods</a>
                    <a href="/categories/255757-breakfast-reviews-and-ratings">Breakfast</a>
                </div>
            </li>
            <li>
                <label>Household</label>
                <div class="container">
                    <a href="/categories/167203-air-fresheners-reviews-and-ratings">Air Fresheners</a>
                    <a href="/categories/172613-dishwashing-reviews-and-ratings">Dishwashing</a>
                </div>
            </li>
        </ul>
    </aside>
</header>

您可以在https://youtu.be/NQGnqWBHVuc看到行为的截屏视频。 如果您仔细注意,当我关闭菜单时,菜单会在关闭之前闪烁一秒钟。有人可以帮帮我吗?感谢。

0 个答案:

没有答案