CODEWITHSUNDEEP
javascriptiosangularangular-material2
Cacoon
Cacoon

Reputation: 2538

Site not rendering on some IOS devices [White screen of death?]

Current behavior

My application which I have built and uploaded to https://callum.tech/new will not render on some IOS devices, I havnt tested this on a huge array but I have tested it on 2 devices, my personal iPhone 5 running IOS 10.3.3 and my friends iPad which I cannot recall the version. It will simply render a white page, no matter how many refreshes, or going into 'private' etc it refuses to render. To eliminate the potential for this being just my phone (when I first discovered the issue) I fully formatted it to factory settings and still same result, tried on multiple locations (aka varying IPs), tried VPN, wifi to mobile etc.

Here is it running on http://browserstack.com and return a white page with no real errors: (I am also out of free sessions so that is currently out of the question enter image description here

Expected behavior

Pages renders like it does in some IOS devices and andriod

Minimal reproduction of the problem with instructions

Here is my full up to date github of the project: https://github.com/kenji-1996/CallumTech I am not sure how it can be fully tested, but I cannot even debug the potential console errors because I do not own a mac to use Safari 6 web inspector feature

What is the motivation / use case for changing the behavior?

I want my site to actually run

Note

I have had older versions working fine on my phone, i am not sure what point it started breaking

Environment


Angular version:  4.4.6, is this the latest?


Browser:
- [x ] Chrome (iOS) version 'CriOS/62/0/3203/70 Mobile/14G60 Safari/602.1
- [x ] Safari (iOS) version 602.1
 
For Tooling issues:
- Node version: v8.4.0
- Platform:  IOS

Others:
- Build using this: ng build --prod --base-href /new/ --build-optimizer

Upvotes: 3

Views: 1407

Answers (1)

Cacoon
Cacoon

Reputation: 2538

The answer is including encapsulation: ViewEncapsulation.None here:

@Component({
    selector: 'app-navbar',
    templateUrl: './navbar.component.html',
    styleUrls: ['./navbar.component.scss'],
    encapsulation: ViewEncapsulation.None
})

Upvotes: 1

Related Questions