Partial FOUC due to missing critical css

[bsumter]

🐞 Bug report

What modules are related to this issue?

• aspnetcore-engine
• builders
• common
• express-engine
• hapi-engine

Is this a regression?

Yes (I believe), the previous version in which this bug was not present was: 9.X

Description

A clear and concise description of the problem...

After upgrading from Angular 9.X to 12.1.0, I'm noticing a significant Flash of Unstyled Content (FOUC). The inline critical css is missing a lot of styling.

Short video of what's happening:
https://user-images.githubusercontent.com/22917990/136787279-6115a3ec-b881-4bec-b19b-ccb56bfd896f.mp4

🔬 Minimal Reproduction

Easiest way to reproduce is by going to our live site and press F5 with Cache disabled (via Developer tools).

Live site:
https://www.sportspace.nl/

Test server running on angular 9.1.1:
https://sportspace-tst.azurewebsites.net/

🔥 Exception or Error

None.

🌍 Your Environment

"dependencies": {
  "@angular/animations": "^12.2.7",
  "@angular/cdk": "^12.2.7",
  "@angular/common": "~12.2.7",
  "@angular/compiler": "~12.2.7",
  "@angular/core": "~12.2.7",
  "@angular/forms": "~12.2.7",
  "@angular/google-maps": "^12.2.7",
  "@angular/platform-browser": "~12.2.7",
  "@angular/platform-browser-dynamic": "~12.2.7",
  "@angular/platform-server": "~12.2.7",
  "@angular/router": "~12.2.7",
  "@ng-bootstrap/ng-bootstrap": "^10.0.0",
  "@nguniversal/express-engine": "^12.1.0",
  "bootstrap": "^4.5.0",
  "express": "^4.15.2",
  "rxjs": "~6.5.4",
  "tslib": "^2.0.0",
  "zone.js": "~0.11.4"
},
"devDependencies": {
  "@angular-devkit/build-angular": "~12.2.7",
  "@angular/cli": "~12.2.7",
  "@angular/compiler-cli": "~12.2.7",
  "@angular/language-service": "~12.2.7",
  "@nguniversal/builders": "^12.1.0",
  "@types/express": "^4.17.13",
  "@types/node": "^12.20.27",
  "ts-node": "~8.3.0",
  "tslint": "^6.1.3",
  "typescript": "~4.3.5"
}

[alan-agius4]

Are you getting an error/warnings on your server during requests?

[bsumter]

Are you getting an error/warnings on your server during requests?

Thanks for your reply. I'm a bit new to reporting issues so bear with me.

I was actually getting 2 css related errors on the server. I've fixed them now and the problem still exists. Do you need any more information?

The problem is that basically the page looks aweful untill styles.{version}.css is loaded.

[bsumter]

Are you getting an error/warnings on your server during requests?

I've updated the initial report including a test-server url running on angular 9.1.1.

[bsumter]

I am using bootstrap CSS, might that be of an issue maybe?

[alan-agius4]

No, that should not matter.

[alan-agius4]

Would it be possible to share a reproduction even privately?

[bsumter]

I'll try to strip it down to the core and share something with you tomorrow.

[alan-agius4]

Hi @bsumter,

Thanks for sharing the reproduction. I did take a look at it and the live sites again and what I noticed is that when disabling JavaScript the application doesn't render correctly.

v9

v12

It appears that the images are loaded using JavaScript via the swiper library, this seems to be the root cause of the content shift which is also causing space not to be reserved.

[bsumter]

Hi Alan,

Correct. With the upgrade to v12 I've also implemented async loading of the swiper images, but that's not the issue here. This is the content shift I'm talking about:

The problem is basically that the initial render is missing all of the base css.

Easiest way to reproduce (basically slow down the requests):

• Open Chrome developer tools
• Disable Cache in the network tab (to not load the styles.xxx.css from cache)
• Enable Fast 3G connection in the network tab (to slow down the downloading of css).

[alan-agius4]

It appears that certain selectors such as .card-body are not being converted to CSS AST. The good news is that Critters are moving towards postcss which appears to solve this issue.

As a temporary workaround you can disable critical css inlining as shown below.

server.ts

 server.engine('html', ngExpressEngine({
   bootstrap: AppServerModule,
+  inlineCriticalCss: false
 }));

angular.json in the build @angular-devkit/build-angular:browser target.

- "optimization": true,
+ "optimization": {
+   "styles": {
+     "inlineCritical": false
+   }
+ },

[alan-agius4]

This should be fixed in version 12.1.2.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}