Webkit pains: dealing with in browser formatting

Let me start out by saying that Webkit is by far my favorite browser engine on the market. Unlike Mozilla’s Gecko, IE9/10’s Trident, and Opera’s Presto, things generally ‘just work’ with Webkit browsers. Even errors get processed correctly on Webkit, I would say to a fault for developer laziness. The Webkit nightlies are usually the first to add new features to CSS’s repertoire, and if not are very quick to add them, and thanks to Google’s Chrome browser, they’re also very quick to be used by a general audience. Webkit is also almost universally used as the web engine of the mobile web, Windows Phone 7/8’s Internet explorer being the main hold out as far as in system browsers are concerned, so for the most part your day to day CSS actions render almost universally across platforms without too much of a fuss.

All of that said, Webkit is an enormous pain in the ass when it comes to dealing with its default styling. Form highlight colors, especially on mobile, default button styling, forms, radial buttons, drop down menus, all a bother to deal with. In order to disable at least all of the nonsense webkit piles onto my forms, I usually have to use the following:

.formsection {
    outline:none;
    -webkit-appearance:none;
    -webkit-focus-ring-color:rgba(0 0 0 0);
}

One would think that -webkit-appearance would take care of the rest, but no. Even then this is hit or miss. Android 2.3 browser recognizes the above code, but Android 4.0 browser ignores -webkit-focus-ring and outline. Strangely, Google Chrome for Android does not ignore the formatting, presumably because it runs on a different webkit build than the default Android 4.0 browser. Likewise, custom highlight colors are ignored by Webkit mobile, instead opting to use whatever the system highlight default is. That isn’t as big of a deal as default webkit styling, but it would have been a nice feature to keep around. iOS is probably the biggest offender with default styling. It also introduces elements like inner shadows which must be manually disabled. Firefox Mobile, at least on Android, has also decided to get into the default styling game, like iOS it also adds shadows, but unlike iOS it ignores font families applied to the document body on form sections.