Blank page/blank float window sporadically

[pennal]

Describe the bug I have a component that I need to use to geenrate a table in a pdf, and then download it. This is a stripped down version

<template>
    <vue-html2pdf
        :show-layout="false"
        :float-layout="true"
        :enable-download="false"
        :preview-modal="true"
        :paginate-elements-by-height="1200"
        filename="test-filename"
        :pdf-quality="2"
        :manual-pagination="false"
        pdf-format="a4"
        pdf-orientation="portrait"
        pdf-content-width="1200px"

        @progress="onProgress($event)"

        ref="renderer"
    >
        <section slot="pdf-content">
             <table style="width:100%">
                <tr>
                    <th>ID</th>
                    <th>startDate</th>
                    <th>endDate</th>
                    <th>emailGuest</th>
                    <th>rentersDetails</th>
                </tr>
                <tr v-for="booking in bookings" :key="booking.id">
                    <td>{{ booking.id }}</td>
                    <td>{{ booking.startDate }}</td>
                    <td>{{ booking.endDate }}</td>
                    <td>{{ booking.emailGuest }}</td>
                    <td>{{ booking.rentersDetails }}</td>
                </tr>
            </table>
        </section>
    </vue-html2pdf>
</template>

<script>
import VueHtml2pdf from 'vue-html2pdf'
export default {
    name: "BookingsPrintDialog",
    components: {
        VueHtml2pdf
    },
    props: {
        bookings: {
            type: Array,
            required: true,
            default: () => []
        }
    },
    methods: {
        generateReport: function() {
            this.$refs.renderer.generatePdf()
        },
        onProgress: function(event) {
            this.$emit('onProgress', event);
        }
    }

}
</script>

Depending where this component is placed, the results vary. I have two views that I used, an empty view and a view with all the bookings in a calendar/table (Call them empty and standard respectively). In general there are issues where the pdf name is not repsected, and the float window is transparent. Also, sometimes a blank page is rendered

Firefox Dev (86.0b8)

• Works in the emtpy view. The float window is shown, the PDF correctly rendered and the pdf can be downloaded
• In the standard view the float window is shown but it is transparent, the file is empty and downloaded immediately, without requiring user input

Firefox (85.0.2)

• Does NOT work in the empty view. The float window is transparent and the pdf is downloaded straight away with the wrong name (pdf)
• Does NOT work in the standard view, same as above for the rest

Chrome (88.0.4324.150)

• Works in the empty view, although the name is some sort of UUID
• In the standard view, an empty document is shown but the float window is correct. File can be downloaded

Safari (14.0.3)

• Works in the empty view, although the name of the file is ignored
• In the standard view, an empty document is shown but the float window is correct. File can be downloaded

To Reproduce Steps to reproduce the behavior:

1. Use a Vuetify (v1.5) app, and add the component attached
2. Use it!

Screenshots Empty float window (Firefox standard):

Correctly shown and rendered (Firefox Dev):

Package Version 1.8.0

Additional context The issue seems to be the worst on the standard firefox. What I cannot understand though is how it works in one view, and then in the other it simply fails. The data is exactly the same, the only difference is that there are other elements attached to it.

[kempsteven]

Thank you i will try to replicate this

[pennal]

I created a simple example to show the issue: https://github.com/pennal/test-pdf/

It has the same dependencies as my project, although stripped down. It shows the same issues I described in the empty view

[pennal]

Hi, were you able to look into this?

[vbalagovic]

Try to put lower pdf quality for eg. 1. That worked for me in safari mobile.