CODEWITHSUNDEEP
ioscsspositioning
Steven Johnson
Steven Johnson

Reputation: 39

CSS Fixed Position Div Scrolls with Page on iOS then returns to the correct position

I am having an issue with my fixed header and footer scrolling up/down with my page content and then returning after scrolling stops. It only happens on iOS devices, at least that I am aware of.

Here is the CSS code that I have: 

.toolbar-wrapper {
background: #f5f5f5;
border-bottom: 1px solid #e4e4e4;
min-width: 20em;
position: fixed;
left: 0;
top: 0;
}
.wrapper {
width: 100%;
clear: both;    
}

And the HTML:

<div class="toolbar-wrapper wrapper">
    <div class="container">
        <nav id="click-menu" class="primary-nav collapsable-menu" role="navigation">
            <span class="menu-toggle">Select a Page</span>
            <div class="menu-wrap">
            </div>
        </nav>
    </div>
    <!-- .container -->
</div>

Upvotes: 1

Views: 916

Answers (1)

plankguy
plankguy

Reputation: 268

Try adding -webkit-transform: translate(0, 0); to .toolbar-wrapper.

I was having a similar issue where the a fixed position element was getting "stuck" in the middle of the page when scrolling back up. I believe that adding transform forces ios safari to use hardware acceleration - I could be wrong about that however.

Hope that helps!

Upvotes: 1

Related Questions