Foundation 6 移动搜索栏在 Android 上停留在底部

Question

在 Android 设备（使用任何浏览器）上浏览站点 http://emich.edu 时，如果点击进入另一页面，粘性移动导航菜单会粘在页面底部，滚动到该页面的底部，然后单击后退按钮。附上问题图片。

这不应该发生；导航应始终位于站点 header 下方。我们正在使用 Foundation 6.3 并尝试了其他几个版本。我们甚至在没有额外标记的情况下在此站点之外尝试了 Foundation，并且产生了相同的结果。我似乎找不到任何其他描述类似问题的线程。会不会是Android的问题？

我们测试过的手机使用 Android v. 7.0 和 6.0.1。

明确地说，这个问题不会发生在 Apple 设备和 PC 上。

<header class="wide-image">
        <div class="brand front-top">
            <div class="row top-row" data-equalizer="branding">
                <div class="large-4 medium-12 small-12 columns logo-combine" data-equalizer-watch="branding">
                    <div class="front-title">
                        <a href="{{f:59436}}"><img src="{{f:57957}}" alt="Eastern Michigan University logo" /></a>
                    </div>
                </div>
                <div class="large-8 medium-12 show-for-large columns" data-equalizer-watch="branding">
                    <div class="row idrow front">
                        <div class="small-12 columns secondary-nav">
                            <xsl:copy-of select="ou:includeFile('/_resources/inc/site-search.inc')" />
                            <ul id="quick-links-top">
                                <xsl:copy-of select="ou:includeFile('/_resources/inc/quick-links.inc')" />
                                <li id="search-glass"><a href="#search-region"><span class="visuallyhidden">Search</span><i class="fa fa-search" aria-hidden="true"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div id="site-title" class="row">
                <div class="small-12 columns">
                    <ouc:div label="site-name" button-text="Site Name" group="_Admin" path="{$ou:siteroot}/_site/inc/name.pcf">
                        <xsl:if test="$ou:action = 'pub' and $ou:siteroot != '/'"><xsl:copy-of select="ou:includeFile(concat($ou:siteroot,'/_site/inc/name.inc'))" /></xsl:if>
                    </ouc:div>
                </div>
                <xsl:if test="($ou:topnav!='off')">
                    <div class="small-12 columns skip-main-nav">
                        <a class="show-on-focus show-for-sr" href="#maincontent">Skip Global Navigation</a>
                    </div>
                </xsl:if>
            </div>
            <div data-sticky-container="">
                <div data-sticky="" data-top-anchor="site-title:bottom" data-options="marginTop:0;" style="width:100%">
                    <div class="title-bar" data-responsive-toggle="example-animated-menu" data-hide-for="large">
                        <button class="menu-icon" type="button" data-toggle="offCanvasLeft" aria-expanded="false" aria-controls="offCanvasLeft">
                            <div class="visuallyhidden">Open/Close Menu</div>
                        </button>
                        <div class="title-bar-title" data-toggle="offCanvasLeft">Search &amp; Navigation</div>
                    </div>
                    <!-- If top nav, add bar -->
                    <xsl:if test="$ou:topnav='on' or $ou:topnav='true' or $ou:topnav='1' or $ou:topnav='yes'"><!-- Top nav is truthy? -->
                        <div id="main-nav">
                            <div class="row show-for-large collapse">
                                <div class="small-12 columns">
                                    <nav class="menu-box {if ($ou:action != 'pub') then 'omni-primary-nav' else ''}"><!-- 'omni-primary-nav' class used to style nav list within OUC preview -->
                                        <ouc:div label="top-nav" button-text="Navigation" group="_Admin" path="{$ou:siteroot}/_site/inc/navigation.pcf">
                                            <xsl:if test="$ou:action = 'pub'">
                                                <xsl:text disable-output-escaping="yes">&lt;? echo $navigation-&gt;primaryMenu; ?&gt;</xsl:text>
                                            </xsl:if>
                                        </ouc:div>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </xsl:if>
                </div>
            </div>
        </div>

        ...a bunch of XSL 

    </header>

Answer 1

默认情况下，这些元素似乎不适合小屏幕。

可以通过添加启用小屏幕粘性数据选项="stickyOn:small;" 要么 data-sticky-on="small"

到元素数据粘性属性。

Answer 2

它在 "small" 上默认不粘的原因似乎是 "save real estate"。

我想是这个bug。请参阅此处提到的解决方法。将讨论转移到那里...

Foundation 6 移动搜索栏在 Android 上停留在底部

Foundation 6 Mobile Search Bar Sticking to Bottom on Android

android

zurb-foundation