CSS result on Android different to iOS

ionic-v1
1

Hello,

I am writing my first ionic app and it is a pleasure to work with!

I have a small CSS issue - my controls are rendering differently on Android than iOS. Screenshots are easier to explain - I have included device screenshots from my Android, iPhone and iPad.

In the top screenshot (Android) - the “Locate” icon on the top right is mixed up with the “Find” button. On the other platforms the CSS is fine.

and here is the ionic HTML code:

<ion-view title="Poker Games">
    <ion-content class="has-header">
        <div class="item-input-inset">
            <form ng-submit="codeAddress(searchLocation.searchTerm)">
                <label class="item-input-wrapper">
                    <i class="icon ion-ios7-search placeholder-icon"></i>
                    <input type="search" placeholder="Address" ng-model="searchLocation.searchTerm">
                    <button type="submit" id="submit" class="button button-clear button-assertive">Find</button>
                </label>
            </form>
            <button ng-click="findMyLocation()" class="button button-clear button-assertive">
                <i class="icon ion-ios7-navigate-outline"></i>
            </button>
        </div>
... left out
    </ion-content>
</ion-view>

I have no custom CSS and it does this on the Ionic .12 and .13 beta.

On the Simulator it looks fine - it is only when I deploy to my Samgsung S4.

Any ideas on how to fix this?



Android (incorrect)



iPhone (Correct)



iPad (Correct)

Thanks!

2

Don’t suppose anyone has any suggestions on this :wink: Android does not look nearly as nice as iOS…

3

After upgrading to Android KitKay 4.4.2 (which uses Chromium WebView) this problem goes aware… unfortunately only 24% of Android users are on this update and better…

4

Can u reupload the images? The first idee that i have is, that iphone and your s4 have diffrent dpi.

5

Here’s what the exact same code looks like before Android KitKat 4.4.2

and after the KitKat upgrade (when it uses the Chromium WebView:

6

try to debug it in Chrome and look in the CSS or Buld your app for some android-emulation devices

7

Thanks, but I am not spending any more time on it if newer versions of Android don’t have the issue (too many other fish to fry :wink:

8

You can try wrap your application with crosswalk which will force your application to open with chromium webview instead of the default browser on android devices. In any case you should always check your apps on diffrents emulators. Using crosswalk should be your last option used.