Showing results for 
Search instead for 
Did you mean: 

CSS not working on old android phone


In our application we are using following loading animation while loading data anywhere in application 


                position: fixed;
                left: 0px;
                top: 0px;
                width: 100%;
                height: 100%;
                z-index: 9000;
                background: rgba(0, 0, 0,0.5);


        .smallSpinner {
            min-width: 24px;
            min-height: 24px;
        .smallSpinner:before {
            content: 'Loading…';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 30px;
            height: 30px;
            margin-top: -10px;
            margin-left: -10px;
        .smallSpinner:not(:required):before {
            content: '';
            border-radius: 50%;
            border: 6px solid rgba(0, 0, 0, 0.3);
            border-top-color: black;
            animation: smallSpinner .8s linear infinite;
            -webkit-animation: smallSpinner .8s linear infinite;
        @keyframes smallSpinner {
            to {transform: rotate(360deg);}
        @-webkit-keyframes smallSpinner {
            to {-webkit-transform: rotate(360deg);}

<div id="indexPageLoading" class="fullPageLoadClass smallSpinner"> </div>

Now this works perfectly in new android devices like Nexus 4 . But its not working in old samsung  or htc e.g. samsung duos or htc one  etc.

Interesting part is when I am trying to debug application using intel xdk app preview remote debugging session on same device (samsung duos or htc) it works. So I think its some kind setting I am missing which is enabled in Intel xdk app preview so its working while debugging but not after installing application.

Any suggestions will be helpful

Thank You 



Tags (2)
0 Kudos
1 Reply

Use Crosswalk.  It is one of the build options.   It includes a more modern webview so you don't need to navigate all the older  webviews on the older androids.