Can't print from website after Chrome version 108.0.5359.125

Question

There is a printing problem after the latest version of Chrome. Since each <td colspan> content in the table is of a certain length, it says "Loading preview" and eventually shows an error.

<tr class ="gosterme islem" style="contain:strict; display:table;">

It currently works fine in Opera browser but previously worked in Edge.

<tr class="gosterme nosort">
    <td colspan="2">
        <input type="hidden" name="SiraNo" value="@(item.SiraNo)" />
        <input type="hidden" name="ID" value="@(item.ID)" />
        <table class="ictablo" width="100%" style="text-align:left;">
            <tr class="@(renkClass) @(item.ID==0?"":"prgOzet")" data-link="@Url.Action("ProgramOzetTooltip", "Program", new { ID = item.ID, area = "yonetim", TurID = item.TurID,Tarih=item.Tarih.Value.ToString("dd.MM.yyyy HH:mm") })">
                <td colspan="2">
                    <div class="gunlukProgramCerceve">
                        <div class="gunlukProgramBaslik">
                            <span class="saatYazi" style="font-weight:bold;">Tüm Gün</span>
    
                            @if (item.TurID != (int)Sabitler.ZiyaretTur.Program)
                            {
                                <span class="saatYazi" style="font-weight:300; background-color:#edebeb; padding:1px; display:inline-block;width:100%;text-align:center;">
                                    @(KayitTurYazi) 
                                    @if (DvtKesinDegilDurumID == item.DurumID)
                                    {
                                        <span class="davetKatilimKesinDegil tooltips" data-original-title="Katılım Kesin Değil"> ? </span>
                                    }
                            </span>
                            }
                            else if (item.TurID == (int)Sabitler.ZiyaretTur.Program && isTaslakprgVar&& item.KategoriID == TaslakPrgKategori.ID)
                            {
                                <span class="programdurum saatYazi programArzBg">
                                    Taslak
                                </span>
                            }
                        </div>
                        <div class="gunlukProgramDetay">
                            <span class="icerikBolum" style="display:block;">
                                @if (item.TurID != (int)Sabitler.ZiyaretTur.Ziyaret || item.isRandevuAciklama)
                                {
                                    @Html.Raw(item.Aciklama)
    
                                }
                                @if (Model.Filtre.EkstraNot && !string.IsNullOrEmpty(item.EkstraNot))
                                {
                                    <span style="color:red">@item.EkstraNot</span>
                                }
                            </span>
    
                            @if (!string.IsNullOrEmpty(item.PrgNotu)&& item.TurID != (int)Sabitler.ZiyaretTur.Ziyaret&&Model.Filtre.PrgNot)
                            {
                                <span class="katilimcilarNot icerikBolum" style="contain:size;"> @(Html.Raw(item.PrgNotu))</span>
                            }
    
                            @if (string.IsNullOrEmpty(item.Aciklama) && item.TurID != (int)Sabitler.ZiyaretTur.Program && item.katilimcilar.Any() && !Model.Filtre.Katilimci)
                            {
                                YeniKisiModel katilimci = item.katilimcilar.FirstOrDefault();
                                if (katilimci != null)
                                {
                                    @(KayitTurYazi + " :" + katilimci.AdSoyad )
                                    <span class="icerikBolum" style="font-size:@(Model.Filtre.yazi)px;"> @(katilimci.Aciklama)</span>
    
                                }
    
                            }

Answer 1

It appears to be a known issue in Chrome v108: https://support.google.com/chrome/thread/191619088?hl=en&msgid=192661374

Suggested fixes from that thread:

Use contain: size; in the parent element

Use contain: strict; More information about contain is here: https://developer.mozilla.org/en-US/docs/Web/CSS/contain

It may be fixed in a future Chrome release; https://chromestatus.com/roadmap

Update: Both contain options broke chartjs canvas elements in our testing. Contain size didn't resolve the printing issue either.

Simon's suggestion from here caused our chartjs elements to stop working correctly when moving between print preview and the page, and when the page was resized.

@media print {

    .chartjs-size-monitor {
        display:none !important; 
    }
}