Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iOS7 Safari change webkit-overflow-scrolling background color

In a Cordova iPad App for iOS7, I have a DIV (.scrollContainer) with fixed height into which I'm putting some much taller content, and I'm allowing that contained content to scroll like this:

.scrollContainer
{
    width: 512px;
    height: 546px;
    overflow: hidden;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch;
    background-color: #fff !important;
}

#content
{
    width: 512px;
    background-color: #fff;
}

The user can scroll the nested content nicely in the touch interface, but the user can also scroll 'past' the end of the content above or below as per the iOS 7 interface (i.e. it snaps back when they let go).

The background colour revealed as they over-scroll is black. Is there any way to set this to a different colour using CSS?

like image 866
Ade Avatar asked Feb 13 '14 14:02

Ade


1 Answers

Faced the same problem today (iOS 7.1), seems like a glitch or something,

Adding borders or padding seems to fix it, allowing you to set a background color for the element itself. I sorted it out with this trick:

padding-top:1px;
margin-top:-1px;

Another solution would be to leave background unset on .scrollContainer element, and set it for its parent.

like image 194
Andrea Tondo Avatar answered Sep 20 '22 16:09

Andrea Tondo