CODEWITHSUNDEEP
htmlcssios7
supersize
supersize

Reputation: 14783

position fixed and webkit overflow touch issue ios 7

I'm having a responsive website which has the menubar as a sidebar (like FB app) which is fixed via position: fixed; to the right corner. This works fine so far except for iOS7 in combination with -webkit-overflow-scrolling: touch;. The fixed element does not stay at its position, moreover it jumps to the fixed position after the scroll is finished.

Does anyone of you have an advice?

Thanks

Upvotes: 3

Views: 2187

Answers (2)

Kevin LeStarge
Kevin LeStarge

Reputation: 8442

I was able to solve this problem by dynamically changing the -webkit-overflow-scrolling style to auto whenever a button was triggered to show the position: fixed div (which is inside the scrolling container).

I simply add the dont-scroll class.

.container{
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}
.container.dont-scroll{
    -webkit-overflow-scrolling: auto; /* The fix */
}

Once the position: fixed div is hidden (in my case, when a user clicks the 'cancel' button on the popup modal), I dynamically remove the dont-scroll class to enable the smooth scrolling once again.

Upvotes: 0

Xavi Bonell
Xavi Bonell

Reputation: 91

I've been struggling with exactly same issue for the whole day, the conclusion is, yes, there is a bug when you position an element as 'fixed' within a container with '-webkit-overflow-scrolling: touch' in Apple screen devices. And I couldn't find any work around. '-webkit-transform: translate3d(0,0,0)' nor '-webkit-backface-visibility: hidden' make any difference.

So finally i got it working by reassembling my html structure, so the fixed element is not within the scrollable container, is in an upper layer. Maybe not ideal if the 'body' is your scrollable container, but hoping it shed some light for a possible solution.

Extending it with a simplified example:

<body>
    <sidebar></sidebar>
    <div id="content-wrap">
        <article></article>
        <footer></footer>
    </div>
</body>

And CSS would look like:

sidebar{ position: fixed; } #content-wrap{ -webkit-overflow-scrolling: touch; }

Basically the bottom line is, don't position as fixed an element which exist within a scrolling touch container. You have to take it out if you don't want to deal with that iOS weird problem.

Upvotes: 4

Related Questions