Google Chrome and Microsoft Edge do not display PDF correctly with built in viewer

user_16767050 0
Viewed 602

Within a webpage, there are multiple PDFs I would like to display or hide using Javascript (display = "none"/"block"). This always worked but stopped working with chrome-based browsers for a few weeks. Firefox still works fine.

I tried \<iframe>, \<object> and \<embed> without success. Chrome (92.0.4515.159) displays each PDF only the first time. The second time, the field of view is just shown grey without showing an issue in the debugger of the browser. As soon as I resize the browser window, the PDF is displayed correctly again.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body style="height: 100vh;">
        <embed id = "a" src="A.pdf" type="application/pdf" style="width: 100%;height: 100%;">
        <embed id = "b" src="B.pdf" type="application/pdf" style="width: 100%;height: 100%;">
        <script>
            setInterval(toggleFunction, 1000);
            let toggle = false;
            function toggleFunction()
            {
                if (toggle) {
                    document.getElementById("a").style.display = "none";
                    document.getElementById("b").style.display = "block";
                }
                else {
                    document.getElementById("b").style.display = "none";
                    document.getElementById("a").style.display = "block";
                }
                toggle = !toggle;
            }
        </script>
    </body>
</html>
google-chrome pdf css html javascript
2 Answers

Browser bugs solved with Chrome 93.0.4577.63 and Edge 94.0.992.47.

user_167670500

This is not an answer, chrome version 93.0.4577.63 (Official Build) (64-bit) does not produce reported behavior.

Isn't something wrong with the pdf's? Like expired access with no cache enabled? Maybe there's nothing to show.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body style="height: 100vh;">
        <embed id = "a" src="http://www.africau.edu/images/default/sample.pdf" type="application/pdf" style="width: 100%;height: 100%;">
        <embed id = "b" src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" type="application/pdf" style="width: 100%;height: 100%;">
        <script>
            setInterval(toggleFunction, 1000);
            let toggle = false;
            function toggleFunction()
            {
                if (toggle) {
                    document.getElementById("a").style.display = "none";
                    document.getElementById("b").style.display = "block";
                }
                else {
                    document.getElementById("b").style.display = "none";
                    document.getElementById("a").style.display = "block";
                }
                toggle = !toggle;
            }
        </script>
    </body>
</html>

user_38984950
Related