Browser print RenderFragment performance issue

[Owenll66]

Is there an existing issue for this?

• [x] I have searched the existing issues

Describe the bug

Printing a razor component as below with no parameter set on a page by ctrl + p will cause the print window to load forever and memory to surge.

<div style="display: flex;gap: 0.5rem;">
    @TestParameter
</div>

@code {
    [Parameter]
    public RenderFragment? TestParameter { get; set; }
}

Expected Behavior

ctrl + p to print the page should work as expected without stuck on the loading screen. The process memory/CPU consumption should stay stable without surging.

Steps To Reproduce

I have a razor component named TestComponent defined as:

<div style="display: flex;gap: 0.5rem;">
    @TestParameter
</div>

@code {
    [Parameter]
    public RenderFragment? TestParameter { get; set; }
}

And I added this component to a blank page with no parameter defined:

<TestComponent/>

When I go to the page in a browser and press ctrl + p to print the page. The print window is loading forever and with an unreasonable number of sheets shown and the process memory usage starts to surge:

Alternatively, I have created a github repro: https://github.com/Owenll66/AspNetCoreRenderFragmentPrintIssue. It is a blazor wasm project. And the bug can be reproduced by running this project and press ctrl + p on the index page.

Exceptions (if any)

No response

.NET Version

net6.0

Anything else?

No response

[javiercn]

@Owenll66 thanks for contacting us.

This seems to be an issue on the actual HTML for the page. Not sure exactly why, but seems that your component is introducing it, as it does not repro on a page without your component.

It likely means that you need to troubleshoot the styles used when printing. It might also be a bug in Chrome with regards to print and display:flex. Do you have the same issue on a page that is not rendered by Blazor? (Same markup, just blazor is not involved).

[ghost]

Hi @Owenll66. We have added the "Needs: Author Feedback" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[Owenll66]

@javiercn Thanks for your comment. I did find it can be reproduced just by html below without the RenderFragment in chrome - Version 107.0.5304.122 (Official Build) (64-bit) and Edge - Version 107.0.1418.56 (Official build) (64-bit). But not in Firefox. I believe it is an issue in Chrome and Edge. Happy to have this issue closed. Thanks again.

<div style="display: flex;gap: 0.5rem;">
</div>