Screen size issue between Chrome and Headless Chrome

[thomasd3]

Two pictures to illustrate:

With Chrome:

With Headless Chrome:

Same with Firefox. That's on Debian if it makes a difference.

I wonder if there is an issue when the browser is reporting its viewport dimensions to the app.

[kblok]

I would try to see if you get the same with puppeteer in node. If so I would report that to chromiumbugs.

[curtiswmcmillin]

This has recently started happening (a few days ago?). We are seeing a similar issue when generating a PDF server-side: & in the browser/client-side

[kblok]

@curtiswmcmillin I think your case is different. Can you generate an HTML I can use to test it?

[curtiswmcmillin]

Thank you for the quick reply :-). Here's the code:

html.zip

@kblok Thank you for looking into this

[curtiswmcmillin]

@kblok if it helps, we first noticed the issue on 11/13 in the evening about 6 pm EST

[kblok]

@curtiswmcmillin did you open that HTML locally? It doesn't look good.

[curtiswmcmillin]

The html & css hasn't changed in quite a while, but has been working fine. This is the region that seems to be causing the issue:

<footer>
    <div class="footer">
        <a href="/" class="footer-logo">
            <img src="/images/footer-logo-madison-specs.svg" alt="footer-logo">
        </a>

        <div class="footer-desc">
            <p>1125 Ocean Ave Lakewood NJ 08701 | 732.333.2358 | www.MadisonSPECS.com</p>
        </div>
    </div>
</footer>

If you look at the images pasted above, when viewing in Chrome and printing to a printer or to PDF, it aligns to the bottom as you would expect. When using puppeteer through browserless, there's additional padding or margin or something causing it not to align to the bottom (bottom:0).

Try to look past all of the other HTML that as you point out 'doesn't look good'.

Here's the footer css (for print)

@media print { body { margin: -15px -0px !important; padding: 0 !important; height: 100% !important; width: 100% !important; overflow: hidden !important; }

        footer {
            visibility: visible;
            position: fixed;
            bottom: 0;
        }

        .no-print,
        no-print * {
            display: none !important;
        }
    }

I can reproduce this locally on my Windows desktop as well as in Azure in a Windows App Service.

[curtiswmcmillin]

@kblok I've tried using an older version of Chromium, too. Based on the C# code above, do you have suggestions on a different approach?

[kblok]

@curtiswmcmillin what puppeteer-sharp version are you using?

[curtiswmcmillin]

<PackageReference Include="PuppeteerSharp" Version="12.0.0" />

[curtiswmcmillin]

.NET 7

[kblok]

@curtiswmcmillin the HTML you shared won't help :(

[curtiswmcmillin]

That's why I included the CSS. You can reference the CSS here, too: https://npvgenerator.azurewebsites.net

[curtiswmcmillin]

I can adjust the HTML

<link rel="stylesheet" href="https://npvgenerator.azurewebsites.net/css/style.css">
<link rel="stylesheet" href="https://npvgenerator.azurewebsites.net/css/style.madison-specs.css">

[curtiswmcmillin]

Does that help? Sorry for the confusion.

[kblok]

If you can give me a piece of code, in text, that I can work in isolation, that would be more productive. A zip that I can download and it works the same way as in your machine.

[curtiswmcmillin]

This file should have everything (verified by dropping it into jsfiddle):

html.txt

I can display that in an iFrame and Print to a printer as well as a PDF and the footer aligns to the bottom. But through puppeteer-sharp, there's additional padding/space (see images above). And up until a few days ago, worked - brilliantly, I might add. Something changed on 11/13 around 6PM EST (not code on my end, I am the sole developer on this project and the only one who commits changes to the repo).

[kblok]

It seems it looks ok on my side

[kblok]

You could send me an email with your browserless URL.

[curtiswmcmillin]

Should have it, if not lmk

[curtiswmcmillin]

I've tried a number of different options in this code block but no luck:

    ```

using var browserFetcher = new BrowserFetcher(); await browserFetcher.DownloadAsync(); await using var browser = await Puppeteer.ConnectAsync( new ConnectOptions { BrowserWSEndpoint = $"{_appSettingsDocumentService.Value.BrowserWSEndpoint}{_appSettingsDocumentService.Value.BrowserlessToken}" });

    await using var page = await browser.NewPageAsync();
    await page.SetContentAsync(html);

    await page.WaitForNetworkIdleAsync(options: new WaitForNetworkIdleOptions
    {
        Timeout = _appSettingsDocumentService.Value.NetworkOptionsTimeout,
        IdleTime = _appSettingsDocumentService.Value.NetworkOptionsIdleTime
    });

    var pdfOptions = new PdfOptions
    {
        Scale = 1,
        PreferCSSPageSize = true,
        PrintBackground = true
    };

    var marginOptions = new MarginOptions
    {
        Top = "20px",
        Bottom = "20px",
        Left = "25px",
        Right = "25px"
    };
    pdfOptions.MarginOptions = marginOptions;