Texts shift down only in Vuejs.

[killernova]

Unlike other issues about texts shift down, it worked very well if I copy the code to the Chrome console, but if use those code in vue, the texts shifted down some distance. Using methods from others doesn't work, those methods include: setting line-height; set image as inline-block;

codes:

const element = document.getElementById("print-area");
const opt = { html2canvas: { width: 540 }, jsPDF: {format: 'a4'}};
html2pdf().set(opt).from(element).save();

html2pdf version: 0.9.3 vuejs version: 3.4.29 tailwindcss version: 3.4.10 platform: macos browser: chrome

[killernova]

I found the solution: The reason is that Tailwindcss set img height to auto, so just overwrite this attribute to unset;

img {
    height: unset;
}

[martijnvdb87]

I found the solution: The reason is that Tailwindcss set img height to auto, so just overwrite this attribute to unset;

img {
    height: unset;
}

I had the same problem with text shifting down when using html2canvas with Vue and Tailwind. Unfortunately the suggested solution didn’t work for me.

Tailwind’s Preflight sets all img elements to display: block. I could fix it by adding this code below @tailwind base;:

@layer base {
    img {
        display: unset;
    }
}