Elements inside generate result have strange vertical position error [keywords: tailwind, vue, tailwindcss]

[fr1g]

～

Please follow the general troubleshooting steps first:

• [x] You are using the latest version
• [x] You are testing using the non-minified version of html2canvas and checked any potential issues reported in the console

Bug reports:

Elements inside generate result have strange vertical position error， seems all are positioned at a lower place as expected.

Specifications:

• html2canvas version tested with: ^1.4.1 npm
• Browser & version: Edge chromium 124
• Operating system: macOS 14.4.1

Screenshot:

upper: how the original html looks like lower: what the image actually rendered inside canvas

Others

you can take a glance on my project demo HERE but this one fully written in Chinese. and the project's source code is HERE

Also See

similar issue: #3031

[fr1g]

btw to use "canvas append inside body" debugging behavior in the deployed demo, type ?localhost after address and then refresh -> f12 -> invoke DebugCondition2() in console ... maybe work. just click the left-bottom corner yellow button will invoke generation (生成)

[fr1g]

SOLVED this was caused by default tailwindcss behaviour, and solution is avaliable here: StackOverFlow

[fr1g]

I've added some keywords into the title in order to make others able to seek such a solution easier via searching.