Text appears blurry in Ionic side menu


#1

How can I get rid of the blurry text in the ionic side menu? Translate3d seems to mess up the fonts appearance here(tested on Android phones). Does anyone know a css trick that resolves this issue? Thank you very much in advance :slight_smile:
Best wishes
Katie


#2

Hello even I had this issue. The problem was not with ionic but with my phone. It had a bloody poor display.
Then I tested my app on a Nexus 5 then I noticed that the side menu was crystal clear.

And if your icons are blur on any device, then try keeping the font size to a value that is multiple of 16.


#3

@Katrin yeah, depending on the phones display, you can have some odd results. But that is just the nature of things. Some devices have a pixel ration of 1, some have 2, then there are those odd ones with 1.5 which throws all of the antialiasing off.


#4

Thanks for your help :slight_smile: I found a way to further improve the fonts appearance by simply adding a text-shadow of 1px to it. I have no idea why it works, but it looks sharper now. :slight_smile: PS: I LOVE your framework. Being pretty average in development stuff, it helps me hugely to get my app done.