[Bug]: TextLayer not rendering properly

[big-yellow-duck]

Attach (recommended) or Link to PDF file

https://arxiv.org/pdf/2408.09869

Web browser and its version

Chrome Version 132.0.6834.110 (Official Build) (64-bit)

Operating system and its version

Debian 12.6

PDF.js version

v4.10.38

Is the bug present in the latest PDF.js version?

Yes

Is a browser extension

No

Steps to reproduce the problem

I'm Using pdfjs in svelte but I can't seem to get the text layer to render properly.

<script lang="ts">
    // import "pdfjs-viewer-element";
    import * as pdfjs from "pdfjs-dist";

    import "pdfjs-dist/web/pdf_viewer.css";
    import { onMount } from "svelte";
    

    let pdfCanvas: HTMLCanvasElement;
    pdfjs.GlobalWorkerOptions.workerSrc = "/pdfjs_4.0.189/build/pdf.worker.mjs";

    interface PdfPages {
        pageCanvas: HTMLCanvasElement;
    }
    const minScale = 1.0;
    const maxScale = 5;
    let scale = 1;
    let scaleRes = 1.5;

    let pdfPages: PdfPages[] = [];
    let pdfContainer: HTMLDivElement;
    let pdfRenderContext: CanvasRenderingContext2D;
    let doc: pdfjs.PDFDocumentProxy;
    let pageCount: number;
    let renderCanvasList: HTMLCanvasElement[] = $state([]);

    let textContainer: HTMLDivElement;
    
    async function renderPage(
        pageNumber: number,
        pageRenderElement: HTMLCanvasElement,
    ) {
        const page = await doc.getPage(pageNumber);
        let viewport = page.getViewport({ scale: scale });
        var outputScale = window.devicePixelRatio || 1;

        pdfRenderContext = pageRenderElement.getContext(
            "2d",
        ) as CanvasRenderingContext2D;

        // add canvas to parent container
        // pdfContainer.appendChild(pageRenderElement);

        pageRenderElement.width = Math.floor(viewport.width * outputScale);
        pageRenderElement.height = Math.floor(viewport.height * outputScale);
        pageRenderElement.style.height = Math.floor(viewport.width) + "px";
        pageRenderElement.style.height = Math.floor(viewport.height) + "px";

        let transform =
            outputScale !== 1
                ? [outputScale, 0, 0, outputScale, 0, 0]
                : undefined;
        await page.render({
            canvasContext: pdfRenderContext,
            transform: transform,
            viewport: viewport,
        });
        let textContent = await page.getTextContent();

        let textLayer = new pdfjs.TextLayer({
            container: textContainer,
            textContentSource: textContent,
            viewport: viewport,
        });
        textContainer.style.left = pageRenderElement.offsetLeft + "px";
        textContainer.style.top = pageRenderElement.offsetTop + "px";
        textContainer.style.height = pageRenderElement.offsetHeight + "px";
        textContainer.style.width = pageRenderElement.offsetWidth + "px";

        await textLayer.render();
       
        page.cleanup();
        console.log("rendered");
    }

    onMount(async () => {
        console.log("load doc");
        const loadPdfTask = pdfjs.getDocument(
            "https://arxiv.org/pdf/2408.09869",
        );
        doc = await loadPdfTask.promise;

        renderPage(1, pdfCanvas);
        // pdfjs.
    });
</script>

<div class="pdfContainer relative w-fit" bind:this={pdfContainer}>
    <canvas bind:this={pdfCanvas}></canvas>
    <div id="textLayer" class="textLayer" bind:this={textContainer}></div>
</div>

<style>
</style>

Here's the output when I select the text:

I cant find any docs related to the TextLayer API. Some fresh working example will help alot!

What is the expected behavior?

When viewing in firefox everything works perfectly.

What went wrong?

Trying to select text is painful

Link to a viewer

No response

Additional context

No response

[nulllfeng]

I encountered the same problem！
version: 5.1.91

[ylc395]

Here is my case