Ionic CSS is not loading when page is refreshed


#1

#2

When you say ‘when application is first opened’ do you mean the moment when ionic serve is launching the browser and opening the ‘app’ page? Developer tools aren’t active at that moment right?


#3

Actually i dont understand exactly what did you mean but yes i mean ionic serve is launching the browser. no problems appear when the page first opens. but everything seems to be bad after you’ve refresh the page.


#4

When initially loading the ‘app’, at browser launch, your developer tools aren’t active. Ionic selects an ‘theme’ based on your device. If you inspect your page you’ll see that the gets the ‘md’ with ‘platform-core’ classs (and some more stuff) at startup. When using the developer tools with the device mode enabled and you refresh at that point, the app reloads and the class is set again based on your ‘selected device’. In your case iPhone 6/7/8. You’ll now have e.g. ‘ios’ and ‘platform-ios’ and more set. This is giving you that ‘css error’.

This is not an error btw. You’ll just have to implement some platform specific css tweaks. That will fix your problem.

Try using:
ionic serve --lab
You’ll be able to view multiple platforms and it’s styles. This way you’ll be able to inspect them easily and create platform specific css tweaks easier.

Device mode:

Stackoverflow answer: