Foundation 6 Mobile Search Bar Sticking to Bottom on Android

问题

When navigating the site http://emich.edu on Android devices (with any browser), the sticky mobile navigation menu sticks to the bottom of the page if one clicks through to another page, scrolls to the bottom of that page, and clicks the back button. A picture of the issue is attached.

This should not happen; the nav should always be under the site header. We are using Foundation 6.3 and have tried several other versions. We have even tried Foundation outside of this site with no extra markup, and the same result is produced. I can't seem to find any other threads that describe a similar problem. Could it be a problem with Android?

The phones we have tested use Android v. 7.0 and 6.0.1.

To be clear, this problem does not happen on Apple devices nor PCs.

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

回答1:

It seems by default, the elements aren't sticky for small screens.

Sticky for small screens can be turned on by adding data-options="stickyOn:small;" or data-sticky-on="small"

To the element data-sticky attribute.

回答2:

Seems the reason it isn't sticky by default on "small" is to "save real estate".

Methinks it is this bug. See the workarounds mentioned there. Moving discussion there...

来源：https://stackoverflow.com/questions/45805735/foundation-6-mobile-search-bar-sticking-to-bottom-on-android