CODEWITHSUNDEEP
androidionic-framework
PainAndGain
PainAndGain

Reputation: 137

Ionic Framework : Text of the application is blurry when testing app on Android device

I just had a huge deception! I've just finished the first version of my app and so I went on and I tested it on my Android device... The content of the app is blurry!

You can see it on the screenshots. It looks like the text does not display correctly in the list. You can also see that the save button is a little bit deformed.

Where does it come from?

Well, I have remarked that elements of the app that I have customized using a style.css appear blurry and that the ones belonging to the Ionic framework appear correctly. The problem may come from here as it may come from something completely different, I honestly don't know.

How can I fix this?

Pretty please!

Thank you!

PS: The screenshots are actually a little less blurry than how it looks in the app.

EDIT:

#test{
color: white;
margin-top: 5px;
}
#location{
float: left;
}
#timeIn{
text-align: right;
color: red;
}
#timeOut{
text-align: right;
color: green;
}
#check{
display: block;
}

Screenshot 1 Screenchot 2

Upvotes: 4

Views: 1795

Answers (2)

olealgo
olealgo

Reputation: 479

This has to do with font rendering. Has nothing to do with --livereload

You can bypass this either using font-smoothing in CSS, force it through the browser/webview or through other means.

My suggestion is to enable anti-aliasing CSS:

 -webkit-font-smoothing: antialiased;
 -font-smoothing: antialiased;

..on another note, it seems ionic automatically switches to "ios" mode if subpixel/anti-aliasing is enabled. Go figure :)

Upvotes: 1

siege
siege

Reputation: 21

I have had the same issue, it only occurred during development while using a remote host. Test it by not using --livereload flag to confirm.

Hope it helps someone else.

Upvotes: 2

Related Questions