Just thought of making a list of -webkit (Chrome, Safari) css properties that mostly affects mobile user experience – iOS, Android, etc.
-webkit-overflow-scrolling
Ever wanted to mimic the native style scrolling with momentum ? -webkit-overflow-scrolling: touch; allows you to do just that. Check out the testcase.
[css]
/* Sample code, div with fixed width/height and overflow of auto */
div {
width: 300px;
height: 200px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
[/css]
A value of auto will lead to scrolling without the momentum.
-webkit-touch-callout
When you tap and hold a link on iOS, a callout bubble dialog appears. By using -webkit-touch-callout: none; you can prevent this default behaviour, i.e., the callout never shows up on tapping and holding.
[css]
/* Sample code */
a.no_callout {
-webkit-touch-callout: none;
}
[/css]
-webkit-tap-highlight-color: color
This property lets you specify the highlight color when a link or JavaScript clickable element is tap and held or just tapped. It is important to note that this property obeys alpha values, so if you specify a value like orange then on tapping, orange highlight will show up with alpha value of 1 (opaque) resulting in the element being not visible. So a value with alpha transparency like rgba(255, 165, 0, 0.5); (orange with semi-transparency) will be better.
You can completely get rid of the highlight like this –
[css]
a.no_highlight {
-webkit-tap-highlight-color: transparent;
}
[/css]
If you know about more related properties, share them in the comments. Hopefully I’ll try to keep this list updated so that it can be used as a decent reference.
