I’ve been building an app in Ionic, mainly just a proof of concept. I’ve been mostly developing locally in the browser but decided to do a test build to an android emulator (api 30) to see how it looks.
I’ve noticed some quite odd but annoying differences in the look of the app, I’m really struggling to find what is causing this since everything I find is from 5+ years ago and relates to an old web view being used, which shouldn’t be the case here. It’s a few day old Ionic app so is running V6 and Capacitor, no additional plugins installed other than the default.
I’ll attach some screenshots below, but the differences I’m noticing are:
- ion-input is completely unstyled on android. I have overridden a background colour via the CSS variables but even the label / help text is completely wrong
- Some CSS is just not being applied. For example I have some utility classes such as
gap-3which are seen inside the devtools but doesn’t get applied.
Anyone have any ideas? Ripping my hair out as it’s really odd and I’m struggling to find anyone else experiencing something similar.
I have also run the app inside the browser on the device via a live reload and it looks fine.
Edit: I decided to make sure it’s nothing I’ve done inside my project so I created a fresh Ionic app via the dashboard, wizard thing, and changed the first tab to include an ion input. Again, in the browser it works fine, build for android it is unstyled and has none of the floating label functionality. Repo link - GitHub - VizuaaLOG/ionic-v6-test-input
On the left is one of the pages in a browser, notice the spacing between the cards that’s using the CSS gap property:
On the right is the same page but running inside an android emulator on the latest (I think) API version, 30. Here the spacing has gone but as you can see by the dev tools screenshot overlay on the right the devtools are showing as it being applied.
This is the more interesting one since I’m completely losing ion-input, ion-item and ion-label styles here. On the left is the screenshot from the app in the browser, with everything styled as I would expect.
On the right is it running inside the same emulator, with most of the ion-item and input styles being lost. However, as with the previous gap issue, the styles are being applied. The devtools screenshot shows the background CSS variable which has been converted from an RGBA format to HSL. Even if I edit this in dev tools to black, I don’t see anything
