CSS not loading at first then OK

Ionic Framework
1

Hello … good evening! I’m experiencing a very weird problem. I have built an app with Ionic 6.12.1, Angular 10.0.8 node v.12.19. I don’t believe it is related to Angular but I’m not sure about the Ionic framework. Precisely the issue is with CSS loading. When I open the app the first time after a ionic serve the CSS does not load well (in both the web browser and the mobile device). This is how it looks:

image

If I do a save in VS Code just to trigger a new compile the CSS loads right and it stays like that all along. The problem manifests only the very first time the app loads:

image

Unfortunately in the device if it loads bad it stays bad, no refresh possible as in the browser. No error showing in the console and anywhere else. Just some weird warnings in the Chrome dev console:

image
image703×413 65.1 KB

and, when I do a save to trigger a compile the warnings disappear. I don’t know if the warnings are a clue, but they are the only thing that shows up when the problem manifests and disappears when problem is gone.

In the SCSS file I tried removing one by one all elements but the problem stays. Here’s the file content:

  • {
    –background: linear-gradient(to bottom, rgb(255, 253, 253, 1), rgba(184, 176, 169, 0.9) ), url("…/…/assets/gps.jpg") no-repeat center center fixed;
    –background-size: cover;
    }

ion-card-content {
text-align: justify;
font-size: 1.2em;
font-weight: 500;
color: black;
padding: 0;
}

ion-toggle {
–background: white;
–background-checked: white;
border: 2px #839788 solid;
border-radius: 25px;
–handle-background: black;
–handle-background-checked: rgb(197, 20, 20);
–handle-width: 50%;
width: 100%;
height: 45px;
–handle-spacing: 5px;
–handle-height: 100%;
margin-bottom: 10px;
text-align: center;
}
ion-toggle::before {
position: absolute;
top: 13px;
left: 15px;
content: “GPS OFF”;
font-weight: 900;
color: white;
font-size: 18px;
z-index: 1;
}
ion-toggle::after {
position: absolute;
top: 13px;
right: 15px;
font-weight: 900;
content: “GPS ON”;
color: white;
font-size: 18px;
z-index: 1;
}

I’m lost… don’t know what to look for…

2

I would expect this to happen in a traditional HTML/CSS/JS context where one can mistake the position of the stylesheets in the html header… JS loading before CSS… but in this context all is established by the framework. Any hint?

3

I found the problem but not the solution. The Leaflet external CSS inserted in the index.html does not load the first time. On refresh it does. I believe adding the CSS file locally should fix it but it loads files dependancies and when placed locally the compile throws errors that it cannot file certain files. So… how do I add this Leaflet external CSS locally in Ionic/Angular ?

4

I was able to import the external CSS from local but problem remains. I give up. I believe it is a bug!