Debugging CSS for Ionic app in iOS?

One screen of an Ionic app I’m working on contains a small <ion-content> element. This element is supposed to always be stationed at the bottom of the screen. By default, <ion-content> objects use top: 0, which I don’t want, so to override this I used scss to style it with position: absolute, bottom: 0 !important. and top: auto. This has exactly the effect I want in Chrome and Safari when debugging with ionic serve as well as on Android, the element is rooted at the bottom of the screen.

However this does not work when running the app on iOS, because of course it doesn’t. On iOS the bottom attribute seems to be totally ignored and the element is positioned at the top of the screen.

What is the best way to debug CSS for apps running in iOS when those problems cannot be reproduced with ionic serve?

Remote Debugging. Follow these instructions here to debug the problem in Safari dev tools: https://ionic.zone/debug/remote-debug-your-app#ios Look at the console and network tabs for errors.

2 Likes

Thanks, I’ve got everything enabled as it should be but Safari’s Develop menu only lists my PC and under it says “No inspectable devices” while I have the app running on simulator (remote debugging and web inspector are enabled respectively). Is this normal? Am I looking in the wrong place?

PC as in Windows?
Normally the instructions of the link are correct.

The PC is a mac mini, I’m compiling for iOS. I don’t have a device connected physically and am using simulator.

That should work just fine. Reboot maybe?

1 Like

Thank you, rebooting did the trick!

1 Like