CODEWITHSUNDEEP
cssangular
scott
scott

Reputation: 83

Angular 5 app loads incorrectly first time on Safari

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"
  }
}

enter image description here

Upvotes: 1

Views: 780

Answers (1)

scott
scott

Reputation: 83

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.

Upvotes: 2

Related Questions