help: CSS not loading for iOS

[tomirons]

📚 What are you trying to do?

I've got a brand new nuxt app with the ionic module and when it launches the mobile app, the iOS version does not look like I would expect it to.

However, when I load the web version, it appears to be loading the right CSS.

🔍 What have you tried?

No response

ℹ️ Additional context

No response

[aaronksaunders]

i saw that issue also, for now, you can just turn them on in the configuration nuxt.config.ts

import { defineNuxtConfig } from 'nuxt';
export default defineNuxtConfig({
 ssr: false,
 modules: ['nuxt-ionic'],
 ionic: {
 integrations: {
 //
 },
 css: {
 basic: true,
 core: true,
 utilities: true,
 },
 },
});

[danielroe]

As @aaronksaunders says, basic & core CSS is injected by default, but additional utilities are not enabled by default and have to be turned on:

import { defineNuxtConfig } from 'nuxt';
export default defineNuxtConfig({
 // ...
 ionic: {
 css: {
 utilities: true,
 },
 },
});

But let me investigate to see whether there's a viewport issue here as well.

[tomirons]

I had all three of them enabled but that didn't change anything.

@aaronksaunders do you have an example repository that I can see this working on? I'm curious if I have something setup incorrectly.

@danielroe, this is a really nice module! Thank you for bringing this idea to life. ❤️

[aaronksaunders]

@tomirons - https://github.com/aaronksaunders/nuxt-app-using-nuxt-ionic-module

@danielroe - it didn't work for me either, I had to set all of them to get the styling to work, I covered it in the video :-)

[tomirons]

This might be an iOS specific thing. Even with cloning that example it's still messed up.

[aaronksaunders]

my bad, I realized what the issue is now, the CSS is not accounting for the view-port related to the notch on the phone.

you need to add additional code to the header to address this issue. It is usually done by default in the HTML for ionic projects

[tomirons]

Are you talking about the <meta name="viewport">? If so, I believe that gets included with the output already.

[aaronksaunders]

I have been looking into this and it seems that the css variable for —safe-area-inset-top is not set properly for the environment. It should be 47px but it is not. I built a test iOS app and dug through the css and discovered the difference

On Thu, Jun 23, 2022 at 12:13 PM Tom Irons ***@***.***> wrote: Are you talking about the <meta name="viewport">? If so, I believe that gets included with the output already. — Reply to this email directly, view it on GitHub <#12 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAEAFGIY5SNFHJOTJJKQOZDVQSEL5ANCNFSM5ZSUHJCQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

--

…

-- Aaron K. Saunders CEO Clearly Innovative Inc ***@***.*** www.clearlyinnovative.com This email message and any attachment(s) are for the sole use of the intended recipient(s) and may contain proprietary and/or confidential information which may be privileged or otherwise protected from disclosure. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient(s), please contact the sender by reply email and destroy the original message and any copies of the message as well as any attachment(s) to the original message.

[tomirons]

This is a very interesting issue. I'd be curious why the nuxt module would not run the same steps as an iconic app?

[aaronksaunders]

@tomirons I am trying to figure out what the difference is but I am certain it has to do with the styling that is applied; also, I think this should be generated based on the platform and not hard coded

<template>
 <div class="md"> //<-- this is not supposed to be hard coded
 <ion-app>
 <ion-router-outlet />
 </ion-app>
 </div>
</template>

https://github.com/danielroe/nuxt-ionic/blob/020fff23d6b36f37d9c14cbd5e850e925b3472f2/src/runtime/app.vue#L2

[tomirons]

Even if that fixes the notch issue, it won't fix the issue that the ionic components are rendering exceptionally small on iOS.

[aaronksaunders]

@tomirons - i tracked down the issue => #15 (comment)

[danielroe]

This should be resolved in v0.2.2. Let me know if not and I can reopen.

@aaronksaunders The only line required to enable all ionic CSS should be utilities: true as the others are true by default.