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.
What's the one thing every developer wants? More screens! Enhance your coding experience with an external monitor to increase screen real estate.
/* Sample code, div with fixed width/height and overflow of auto */
div {
width: 300px;
height: 200px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
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.
/* Sample code */
a.no_callout {
-webkit-touch-callout: none;
}
-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 –
a.no_highlight {
-webkit-tap-highlight-color: transparent;
}
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.
