CODEWITHSUNDEEP
htmlcssmobile-safari
James
James

Reputation: 151

Scrolling content inside a fixed position div on mobile Safari suddenly stops – and starts scrolling the container itself

I have a container which has position:fixed with scrolling content inside. I'm displaying this as a chat feature on mobile devices but on mobile Safari, the scrolling content inside the position:fixed container stops scrolling suddenly and starts to scroll the container itself.

Open this link on mobile Safari to see the effect: http://jsbin.com/ruyito

Editable example here: http://jsbin.com/ruyito/edit?html,css,output

The question: Why does my container div start to scroll its position suddenly and stop scrolling the content? (On Chrome on Android, it works without issue)

Note: if you're having trouble triggering this bug, keep scrolling the content up and down quickly for 10 seconds or so, eventually it will suddenly stop scrolling.

Upvotes: 15

Views: 7581

Answers (4)

Erdal SATIK
Erdal SATIK

Reputation: 670

I opened the link ( http://jsbin.com/ruyito) iPhone 6 - Safari and everything looks fine. Content scrolls as expected. I tried many times up and down scroll but nothing happened.

At which version this happens? I couldn't say anything without experience the bug but i think it can be virtual scroll issue.

You can disable this by adding this.

.chat-container-mobile {
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: color 0 ease-in;
    transition: none;
}

Upvotes: 1

Nehemiah
Nehemiah

Reputation: 1140

Just try to add bottom:0 to .chat-container-mobile { bottom:0 }

Upvotes: 2

Kelly Milligan
Kelly Milligan

Reputation: 51

I've come across this issue several times when trying to use use overflow: scroll div's in iOS Safari.

My understanding it that it's to do with the overscrolling/elastic scrolling animations. What seems to happen is:

  1. When a certain container (i.e. the window, or your scrolling div) is running these animations the events get locked to that container.
  2. When an overflow: scroll container hits the top/bottom of it's scroll height it then starts scrolling the parent container - this is also the case in Chrome.

You may notice in your example that when the scrolling stops working, not touching the screen for a small amount of time (say 500ms?) then trying to scroll again works.

What I think is happening is that when you hit the bottom/top of your scrolling container, the events are getting locked to the parent, in this case the window. While you keep interacting in this state, your events never make it to your scrolling container, and so it appears to be unresponsive.

I've had some success in the past by not propagating the touch events from my scrolling container up to the document: 

$('.chat-container-mobile').on({
    'touchstart': _onTouchStart,
    'touchmove': _onTouchMove,
    'touchend': _onTouchEnd
});

function _onTouchStart(e) {

    e.stopPropagation();
}

function _onTouchMove(e) {

    e.stopPropagation();
}

function _onTouchEnd(e) {

    e.stopPropagation();
}

Note: This will not be a fix in many situations, as you often need to retain default window behaviour. In this case though, you seem to have a fixed layout which doesn't require default document scrolling behaviour. Additionally, you will likely still see the same result if you attempt to scroll by touching on the top 'Group chat' bar or bottom 'Type message' bar, then quickly afterwards try to scroll within your container.

You could also try using e.preventDefault on $(document) for these touch events. This prevents the window from reacting to these user inputs in the first place, again though this can cause many other problems if you need to retain browser defaults.

Also try to localise these bindings only in situations where it's a problem. So check for iOS and Safari before binding onto the events.

I'll come back with any extra findings the next time I try to deal with the the problem - which, let's be honest, is almost every project.

Good luck!

Upvotes: 5

SwankTheTank
SwankTheTank

Reputation: 1137

I dont quite know what the deal is here. It might be that safari freezes when moving it that quickly because it still technically moves the container the way it should by the inspector tools definition, just does not portray it on the screen.

One thing you could try that I did in the inspector tools and seems to solve the issue is reverse engineering what you have. Try this changeup to your code. note the positioning/height/padding on your .chat-container-mobile and z-index/bottom/positioning on the other two elements.

<style>
.chat-container-mobile {
position: fixed;
background-color: #EBEBEB;
padding: 15px;
display: block;
margin: 0;
top: 0px;
color: #444444;
overflow: scroll;
-webkit-overflow-scrolling: touch;
height: calc(100vh - 50px);
padding: 75px 15px 125px;
}
.chat-mobile-header {
position: fixed;
z-index: 10;
width: 100%;
background-color: white;
color: #444444;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 15px;
font-weight: 500;
text-align: center;
top: 0;
margin: 0;
padding: 17px 0;
border-bottom: 1px solid rgba(68, 68, 68, 0.2);
}
.chat-field-mobile {
position: fixed;
width: 100%;
z-index: 10;
bottom: 0;
margin: 0px;
padding: 12px 12px 10px 10px;
background-color: #EBEBEB;
border-top: 1px solid rgba(68, 68, 68, 0.1);
}
</style>

doing it this way those other elements just lie on top of your chat window instead of trying to stack or force your pieces together.

Hope this helps mate!

Upvotes: 1

Related Questions