Angular 5 app loads incorrectly first time on Safari - css

Question

Angular 5.2.5 site. The site works fine on Chrome, Firefox, IE and Edge. In Safari the first time the site loads (or every time if I disable the cache) the content is there but it appears the color and background-color are the same. I removed the sites custome CSS and it gave the same behavior. If the user has cache enabled and they log out then log back in the content correctly shows in the right colors. In the screen shot below I used my mouse to highlight the text fields, just to show that the component correctly loaded in the route but everything is the background color. I also included my package.json.
package.json
{
"name": "mss",
"version": "1.0.0",
"private": true,
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"keywords": [],
"author": "JFI",
"licenses": [
{
"type": "MIT",
"url": "https://github.com/angular/angular.io/blob/master/LICENSE"
}
],
"dependencies": {
"#angular/animations": "5.2.5",
"#angular/cdk": "5.2.5",
"#angular/cli": "1.7.3",
"#angular/common": "5.2.5",
"#angular/compiler": "5.2.5",
"#angular/compiler-cli": "5.2.5",
"#angular/core": "5.2.5",
"#angular/flex-layout": "5.0.0-beta.13",
"#angular/forms": "5.2.5",
"#angular/http": "5.2.5",
"#angular/material": "5.2.5",
"#angular/platform-browser": "5.2.5",
"#angular/platform-browser-dynamic": "5.2.5",
"#angular/platform-server": "5.2.5",
"#angular/router": "5.2.5",
"#angular/upgrade": "5.2.5",
"animate.css": "3.6.1",
"bootstrap": "3.3.7",
"classlist.js": "1.1.20150312",
"core-js": "2.5.7",
"glob": "7.1.2",
"intl": "1.2.5",
"jquery": "3.3.1",
"rxjs": "5.5.6",
"systemjs": "0.20.17",
"typescript": "2.6.2",
"web-animations-js": "2.3.1",
"zone.js": "0.8.20"
},
"devDependencies": {
"#ng-bootstrap/ng-bootstrap": "1.1.1",
"#ng-idle/core": "2.0.0-beta.13",
"#ng-idle/keepalive": "2.0.0-beta.13",
"#swimlane/ngx-charts": "6.1.0",
"#types/angular-idle": "1.1.31",
"#types/core-js": "0.9.43",
"#types/jquery": "3.3.11",
"#types/metismenu": "2.7.1",
"#types/node": "8.0.24",
"#types/selenium-webdriver": "3.0.4",
"angular-calendar": "0.23.7",
"angular-draggable-droppable": "1.0.1",
"angular-resizable-element": "1.2.1",
"angular2-toaster": "4.0.0",
"calendar-utils": "0.1.1",
"css-loader": "0.28.5",
"d3": "4.10.0",
"date-fns": "1.29.0",
"font-awesome": "4.7.0",
"gulp": "3.9.1",
"gulp-clean": "0.3.2",
"gulp-typescript": "3.1.3",
"gulp-util": "3.0.7",
"hammerjs": "2.0.8",
"jquery-slimscroll": "1.3.8",
"less": "3.8.1",
"less-loader": "4.0.5",
"lodash": "4.16.4",
"lodash._reinterpolate": "3.0.0",
"lodash.template": "4.4.0",
"lodash.templatesettings": "4.1.0",
"metismenu": "2.7.4",
"ngx-bootstrap": "2.0.3",
"ngx-breadcrumbs": "0.0.3",
"ngx-cookie": "2.0.1",
"ngx-pagination": "3.0.3",
"positioning": "1.3.0",
"signature_pad": "2.3.2",
"slimscroll": "0.9.1",
"sweetalert2": "7.4.0",
"ts-node": "2.0.0",
"tslint": "4.5.0"
}
}

Answer 1

I could not reproduce this in plunker or stackblitz.
I did fix this. In the main.ts i changed
platformBrowserDynamic().bootstrapModule(AppModule)
to
window.onload = function () { platformBrowserDynamic().bootstrapModule(AppModule); }
It seems like Safari was starting the angular application before all the js files have been unpacked.