Buttons styles apply delay


#1

So I have a custom css styles for my app. For Android I’m using Lenovo P70 and for iOS I’m using iPhone-4s.
Everything works fine in the simulator and Android, but when running it on the iPhone, buttons look like this http://imgur.com/GV8It9L for about 2 seconds, and then go back to normal. Could it be that the phone is just old and slow, or is there some other issue here ? Any help will be appriciated.


#2

I had such issues when using ng-class= instead of class= in places where it was not required.

Replace by class= and the style will be applied before the page actually loads and use ng-class only for the styles that really need to be set dynamically.


#3

Unfortunately I’m using ng-class to toggle the color of the selected buttons, like this:

<button ng-class="{'button-white': selected == 2, 'button-blue': selected ==1}" ng-click="changeSelected()">
        ALCOHOL CONTROLE
    </button>
    <button ng-class="{'button-white': selected == 1, 'button-blue': selected ==2}" ng-click="changeSelected()">
        DRUGS CONTROLE
    </button>

Don’t think I can find a workaround to use just class=


#4

Just split your css and put what is common as class= and use the toggle / condition only for the color but not the shape and rest of your style…

even if coloring may be delayed at least the button will look good with the proper shape.

Just try to add a class=button-white and let the ng-class with your condition as-is, it should already help a bit.


#5

Yep, that actually makes a lot of sense. Worked perfectly. Many thanks ! :slight_smile: