Black screen (ng-component hidden)

Ionic Framework ionic-v3
1

I have an app being hosted on a website that has an intro screen when the user first starts the page. However, I end up with a blank screen when I load it in Safari or Chrome on my iPhone, but it works fine on my desktop. Looking at the code (via Safari debugger), I see this:

<ng-component class="ion-page show-page" hidden="" style="z-index: 99;">
    <ion-content class="intro page-1 content-ios" padding="" style="">

The ion-content element is correct, but why is hidden set on ng-component? If I manually remove this attribute, the page shows normally and all is well. Even stranger, I can reload the page a few times and it’ll come up some times while other times being black.

Thanks.

1 Like
2

BTW, the page loads normally without any errors, so nothing in the console to indicate an issue.

3

I had to use the follow workaround:

        ngAfterViewInit(): void {
                let interval: number = setInterval(() => {
                        if (this.el.nativeElement.hasAttribute('hidden')) {
                                console.log('Removing hidden attribute');
                                this.renderer.setElementAttribute(this.el.nativeElement, 'hidden', null);
                                clearInterval(interval);
                        }
                }, 50);
        }

Not ideal, but it moves me forward.

4

I’m also seeing this issue. Would love to know if anyone has a fix.