CSS Directives for Mobile Webkit

When you are expecting to support mobile browser for your application then you should definitely know about these CSS directives.

1. -webkit-overflow-scrolling: touch

As on a desktop browser you may only use overflow: scroll; to enable an element to be scrollable. However it does not give you a momentum scrolling. You rather have this jittering way of scrolling. -webkit-overflow-scrolling: touch will force another layer and gives you back a native touch scrolling for your element.

Support: Android 4+ & iOS 5+

1
2
3
4

.scrollable {
  overflow: scroll;
    -webkit-overflow-scrolling: touch
}

2. -webkit-tap-highlight-color: ;

When you tap a link then the link receives a grey background. Setting -webkit-tap-highlight-color will allow you to change the color or make it disappear.

Support: Android 4+ & iOS 1.1.1+

1
2
3

* {
    -webkit-tap-highlight-color: transparent;
}

3. -webkit-touch-callout: none;

If you start touching an element for around a second, mobile browser will provide you a callout menu or a magnifier. For instance if you implement a drag and drop handling then this is unwanted. -webkit-touch-callout: none; will remove it.

Support: Android 4+ & iOS 2.0

1
2
3

.draggable {
    -webkit-touch-callout: none;
}