Text-rendering in ionic.css breaks inline-block elements wrapping in Android


#1

We have recently added Ionic to our existing Cordova + Angular app. A lot of the Ionic CSS interfered with ours, and I spent a good 2 days updating our CSS to override the Ionic defaults.

One particularly pesky issue that I couldn’t work out was that our inline-block elements were wrapping prematurely on Android - even when there was still ample space available to fit the text on one line.

It turns out that this CSS rule was the culprit:

text-rendering: optimizeLegibility;

It appears in line 2567 of ionic.css, and lives under the body, .ionic-body selector.

Is this rule completely necessary? It caused us a lot of time to narrow down, and may save others from similar pain in the future.