bug(Overlay): When attaching an overlay to the DOM, the whole page flickers

[talamaska]

Reproduction

Steps to reproduce:

1. create an ng-template with cdkPortal directive
2. create an OverlayRef with Overlay
3. attach the template ref (CdkPortal) to the OverlayRef

Expected Behavior

When I call this sequence of actions I expect to see a modal without causing the page to flicker.

Actual Behavior

for a fraction of a second all texts are invisible on the page
which creates and effect of flickering, the texts are there in the DOM, but not visible
then the PortalOverlay is shown. This happens only the first time I open a CDKPortal
Subsequent call do not provoke this issue.
Looking at the page source initially the cdk-overlay-container is not present in the DOM, it stays there after I close the "modal". Happens the same with MatDialog

Digging deeper

createEmbeddedView(templateRef, context, index) {
                /** @type {?} */
               -> const viewRef = templateRef.createEmbeddedView(context || (/** @type {?} */ ({})));
                this.insert(viewRef, index);
                return viewRef;
            }

this line cause the whole texts to disappear.
At this moment all texts are invisible.
Further researching and creating base templateRef with a an ng-container as ViewContainerRef, the insert method cause the whole app to flicker.
So this must be a bug in Angular

Environment

• Angular: 9.1.9
• CDK/Material: 9.2.4
• Browser(s): Chrome latest
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

[crisbeto]

Can you post a Stackblitz that shows the issue? We have several components that use the same pattern that you're describing and they don't cause any flickering.

[talamaska]

I have a stackblitz, where I don't see the issue. I'm trying to pinpoint reason I don't see that consistently. Let me research a bit more. I know you are using the same pattern in multiple places, I wonder why ng-boostrap is not using that pattern for their modals.

[talamaska]

Ok, I think I have found the issue. It might be related with that my modal scss is loading the whole list of font-faces again, thus triggering the loading of the fonts again, which explains why it doesn't happen on second modal open, maybe because fonts requests were cached, and maybe explains the invisibility of the texts, but not on any other element or component and the text of a simple button without a font set was not disappearing. It is tricky to use @use vs @import, keep that in mind.

[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.}