List of Webkit CSS Properties for Mobiles

Just thought of making a list of -webkit (Chrome, Safari) css properties that mostly affects mobile user experience – iOS, Android, etc.


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.


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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Author: Rishabh

Rishabh is a full stack web and mobile developer from India. Follow me on Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *