CODEWITHSUNDEEP
androidcsscordovahybrid-mobile-appionic-framework
Maulik Anand
Maulik Anand

Reputation: 1449

Text looks Blurred and cheap In Android Hybrid App using ionic framework

I am Learning Ionic Framework (Hybrid mobile app ui framework on top of cordova).

i am following a docs and learning a app.

i found the text blur issue in android. where some text looks much clear and some text becomes blurred. i am debugging mobile web view and mobile chrome through chrome developer tools on windows 8.

here is the screenshots of blur. please take a look. Image Using Google Chrome On Nexus 7 screen 1

For make Closer Comparison I have make the same background color and same foreground color.here is this image.Image Using Google Chrome On Nexus 7 screen 2

I have tried text shadow none, also tried to remove any transforms on parent elements , but nothing worked in my case.

please help me.

in case needed .... i am working on windows 8.1 using visual studio 2013. and using ionic-framework for hybrid mobile app. my device is nexus 7 2012(android 4.4.4)

Anybody have idea how can i remove this text blur issue?

Upvotes: 2

Views: 2383

Answers (2)

Luboš Müller
Luboš Müller

Reputation: 21

I added the following code to custom CSS which helped:

div.scroll.padding {
      -webkit-transform: initial !important;
}

This transformation caused the problem: 

  -webkit-transform: translate3d(0px, 0px, 0px) scale(1);

Upvotes: 2

Klapsa2503
Klapsa2503

Reputation: 919

In my case I have found the following solutions for this problem:

  1. Check code for html errors (brackets, etc.)
  2. Experiment with your css classes, for example using padding="true" instead of class="padding" on ion-content fixed all issues in my case

Upvotes: 4

Related Questions