Content falls over on Android

Hi,

I’ve got a really odd bug going on at the moment, on the odd occasion (I can’t work out what forms it to happen) all the html/css falls over and goes inline on the page. Rotating the content left then back restores the content back the right way.

This is what happens:

When i rotate back and show it again, it looks fine:

It only happens on Android though

Does it happen on other devices as well?

It might help to include crosswalk to your build…
http://blog.ionic.io/crosswalk-comes-to-ionic/

Hi,

Yeah i’ve managed to make it happen on a Nexus 5, 6 and Galaxy S4 running various versions of Android. I did think about crosswalk, but presumably it’d still do the same as it’s happening on latest android?

Tom

Is your page layout static or do you generate it trough angular

It’s static

http://paste.ubuntu.com/14503976/ <- page layout

Tom

Mmm… no idea why this happens then…
I guess you’ve tried updating ionic trough you CLI interface?

Yep! Running the latest!

Sorry, no idea in that case.
Maybe try getting in contact with the ionic dev team…

Did you check using developer tools what actually happens to the layout? Maybe looking at the HTML/CSS explains what happens…

1 Like

…And suddenly I had a random idea…

your Ionic html markups are actually directives which makes your template dynamic.
When a value (direction for example) changes and has layout consequences, Angular needs to recalculate your DOM layout. I noticed as well some lag on the css applying when I have many directives in an app playing together. I never had my view not receiving the correct css, just a bit slow.

As @Sujan12 suggested check with dev tools what is causing this.

If you need to get going on dev tools: