CODEWITHSUNDEEP
cssios7safariwebkit
Ade
Ade

Reputation: 3041

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?

Upvotes: 6

Views: 3839

Answers (1)

Andrea Tondo
Andrea Tondo

Reputation: 499

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.

Upvotes: 14

Related Questions