Texts are shifted down

[Srn5333]

Texts are shifted down！！ but:

• html2canvas version tested with:1.3.3
• Browser & version: Google Chrome 96.0.4664.110
• Operating system: win11

[Srn5333]

That seems to work

[webstager]

That seems to work

It still doesn't work for the input box. Reference link: https://github.com/niklasvh/html2canvas/issues/2769#issuecomment-1000985189

[Srn5333]

That seems to work

It still doesn't work for the input box. Reference link: #2769 (comment)

Try this https://codepen.io/ipphof/pen/qBaagPK

[webstager]

That seems to work

It still doesn't work for the input box. Reference link: #2769 (comment)

Try this https://codepen.io/ipphof/pen/qBaagPK

Hello, after a try, the input placeholder text position will still change.

[jayhoogle]

Hi, I'm having this issue, too and I can't see how the line-height fix should actually work. All I'm trying to render is this and it keeps shifting down:

As an HTML element:

As a screenshot:

This is my code:

<div
  style={{
  padding: "1% 2%",
  display: "inline-block",
  position: "relative",
  background-color: "white",
  }}
>
  ABC
</div>

[User6531]

Hi, I'm having this issue, too and I can't see how the line-height fix should actually work. All I'm trying to render is this and it keeps shifting down:

As an HTML element:

As a screenshot:

This is my code:

<div
  style={{
  padding: "1% 2%",
  display: "inline-block",
  position: "relative",
  background-color: "white",
  }}
>
  ABC
</div>

hello, i have the same problem, can you tell me, did you find any solution to fix this bug? I'll appreciate if you can share it with me.

[worldstop]

我也遇到了 有人解决了吗？

[worldstop]

给下载dome的根节点加 line-height:0.5 也可以 不用给整个body加

[LoicKairon]

Did you find a working fix?

[janhaertel]

I have a similar issue with a div which contains one svg that has foreignObject elements. If I set foreignObjectRendering to true, the div just disappears.

When I inspect the rendered html, I can see, that the computed line-height in the cloned element differs from the computed line-height in the original element.

[StationSoen]

I also encountered this issue and found that the problem was with Tailwind CSS's preflight. Specifically, the issue was with the reset code, which changed the display attribute of the img tag to block in preflight. To resolve this, I either removed preflight or restored the img tag's display attribute to inline-block in global.css.

Not doing preflight - In my case, tailwind layout was broken.

// tailwind.config.js
module.exports = {
module.exports = {
  corePlugins: {
    preflight: false,
  },
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  ...
}

Restore img tag's display attribute - I choose this solution.

/* global.css */
@tailwind base;
@layer base {
  img {
    @apply inline-block;
  }
}
@tailwind components;
@tailwind utilities;

I hope it helped you a lot.

[popejhonpaul]

Does somebody have a solution for this already? I can't make it work.

[boompikachu]

Since html2canvas append div tag to body to get some metrics, we can do the following:

const downloadPdf = () => {
    const style = document.createElement('style');
    document.head.appendChild(style);
    style.sheet?.insertRule('body > div:last-child img { display: inline-block; }');

    html2canvas(element).then(canvas => {
      style.remove();
    });
  };

This will keep image as block

[maiconcarraro]

@boompikachu I used your solution and worked great!

[DivineDemon]

I encountered this problem too, and in my case, the problem was the Tailwind CSS's preflight. In particular, the problem was reset code, which changed the display attribute of the img tag in Preflight to block. It could be solved by not doing preflight, or by doing restore img tag's display attribute to inline-block in 'global.css'.

Not doing preflight - In my case, tailwind layout was broken.

// tailwind.config.js
module.exports = {
module.exports = {
  corePlugins: {
    preflight: false,
  },
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  ...
}

Restore img tag's display attribute - I choose this solution.

/* global.css */
@tailwind base;
@layer base {
  img {
    @apply inline-block;
  }
}
@tailwind components;
@tailwind utilities;

I hope it helped you a lot.

Yes, this worked for me, kudos!

[KID-joker]

1.4.1 still has this error

[mleister97]

Waiting for fix

[coke-fairy]

Waiting for fix

[gurleensethi]

Will this be fixed?

[LeonelCabrera19]

I found this solution:

@layer base {
  img {
    @apply inline-block;
  }
}

The above piece of code should be added after the @tailwind base

here is the original reference

[AmitDigga]

Restore img tag's display attribute - I choose this solution.

/* global.css */
@tailwind base;
@layer base {
  img {
    @apply inline-block;
  }
}
@tailwind components;
@tailwind utilities;

I hope it helped you a lot.

I was not getting expected result even after suggested fix, though there were some improvements. I have to turn on foreign object rendering

From

const generateCanvasFromElementId = async (elementId) => {
  const elementToCapture = document.getElementById(elementId);
  const canvas = await html2canvas(elementToCapture);
  return canvas;
};

To

const generateCanvasFromElementId = async (elementId) => {
  const elementToCapture = document.getElementById(elementId);
  const canvas = await html2canvas(elementToCapture, {
    foreignObjectRendering: true,
    scrollY: -(
      elementToCapture.getBoundingClientRect().top +
      document.documentElement.scrollTop
    ),
    scrollX: -(
      elementToCapture.getBoundingClientRect().left +
      document.documentElement.scrollLeft
    ),
  });
  return canvas;
};

1. Turn on foreignObjectRendering
2. scrollX and scrollY because the object was in parent having position : fixed

[zharletc]

I also encountered this issue and found that the problem was with Tailwind CSS's preflight. Specifically, the issue was with the reset code, which changed the display attribute of the img tag to block in preflight. To resolve this, I either removed preflight or restored the img tag's display attribute to inline-block in global.css.

Not doing preflight - In my case, tailwind layout was broken.

// tailwind.config.js
module.exports = {
module.exports = {
  corePlugins: {
    preflight: false,
  },
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  ...
}

Restore img tag's display attribute - I choose this solution.

/* global.css */
@tailwind base;
@layer base {
  img {
    @apply inline-block;
  }
}
@tailwind components;
@tailwind utilities;

I hope it helped you a lot.

You so cool bro. It's worked as well !

[joaopedromatias]

I also encountered this issue and found that the problem was with Tailwind CSS's preflight. Specifically, the issue was with the reset code, which changed the display attribute of the img tag to block in preflight. To resolve this, I either removed preflight or restored the img tag's display attribute to inline-block in global.css.

Not doing preflight - In my case, tailwind layout was broken.

// tailwind.config.js
module.exports = {
module.exports = {
  corePlugins: {
    preflight: false,
  },
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  ...
}

Restore img tag's display attribute - I choose this solution.

/* global.css */
@tailwind base;
@layer base {
  img {
    @apply inline-block;
  }
}
@tailwind components;
@tailwind utilities;

I hope it helped you a lot.

It worked!!

[SHAFINSHAMUHAMMED]

Did you find a working fix?

if you are using tailwind css add this in index.css @layer base { img { @apply inline-block; } }

[thomasliew]

Since html2canvas append div tag to body to get some metrics, we can do the following:

const downloadPdf = () => {
    const style = document.createElement('style');
    document.head.appendChild(style);
    style.sheet?.insertRule('body > div:last-child img { display: inline-block; }');

    html2canvas(element).then(canvas => {
      style.remove();
    });
  };

This will keep image as block

Thx Bro~ It worked

[peidLuo]

Since html2canvas append div tag to body to get some metrics, we can do the following:

const downloadPdf = () => {
    const style = document.createElement('style');
    document.head.appendChild(style);
    style.sheet?.insertRule('body > div:last-child img { display: inline-block; }');

    html2canvas(element).then(canvas => {
      style.remove();
    });
  };

This will keep image as block

great!!!

[hsynerkl]

Ben de bu sorunla karşılaştım ve sorunun Tailwind CSS'nin ön kontrolünde olduğunu gördüm. Özellikle sorun, ön kontrolde img etiketinin görüntüleme özelliğini bloke edecek şekilde değiştiren sıfırlama koduyla ilgiliydi. Bunu çözmek için ya ön kontrolü kaldırdım ya da img etiketinin display özelliğini global.css'deki inline-block'a geri yükledim.

Ön kontrol yapmıyor - Benim durumumda arka rüzgar düzeni bozuldu.

// tailwind.config.js
module.exports = {
module.exports = {
  corePlugins: {
    preflight: false,
  },
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  ...
}

imgEtiketin özelliğini geri yükle display- Bu çözümü seçiyorum.

/* global.css */
@tailwind base;
@layer base {
  img {
    @apply inline-block;
  }
}
@tailwind components;
@tailwind utilities;

Umarım size çok yardımcı olmuştur.

Thanks bro, I didn't want to deal with this mistake

[shiroringo]

Since html2canvas append div tag to body to get some metrics, we can do the following:

const downloadPdf = () => {
    const style = document.createElement('style');
    document.head.appendChild(style);
    style.sheet?.insertRule('body > div:last-child img { display: inline-block; }');

    html2canvas(element).then(canvas => {
      style.remove();
    });
  };

This will keep image as block

解决了！！感谢大佬！！！！！！！Thank you very much！

[kachkaev]

I was struggling to render inputs and textareas – the text was shifted and trimmed. As a workaround, I managed to create a clone of the element I want to capture and replace all input/textarea elements with spans. This helped!

import html2canvas from 'html2canvas';

const cloneWithReplacedInputsAndTextAreas = <T extends HTMLElement | ChildNode>(node: T): T => {
  if (node instanceof HTMLInputElement || node instanceof HTMLTextAreaElement) {
    const span = document.createElement('span');
    span.textContent = node.value;
    span.className = node.className;
    span.setAttribute('style', node.getAttribute('style') ?? '');
    span.style.width = `${node.offsetWidth}px`;
    span.style.height = `${node.offsetHeight}px`;
    return span as T;
  }

  const clone = node.cloneNode(false) as HTMLElement;

  node.childNodes.forEach((child) => {
    clone.appendChild(cloneWithReplacedInputsAndTextAreas(child));
  });

  return clone as T;
};

export const exportElementAsImage = async ({
  downloadFileName,
  element,
}: {
  downloadFileName: string;
  element: HTMLElement;
}): Promise<void> => {
  const containerForClone = document.createElement('div');

  try {
    const clonedExport = cloneWithReplacedInputsAndTextAreas(element);

    containerForClone.style.pointerEvents = 'none';
    containerForClone.style.position = 'fixed';
    containerForClone.style.left = '10000px';
    containerForClone.style.top = '10000px';
    containerForClone.style.width = `${element.offsetWidth}px`;
    containerForClone.style.height = `${element.offsetHeight}px`;

    containerForClone.appendChild(clonedExport);
    document.body.appendChild(containerForClone);

    const canvas = await html2canvas(containerForClone);

    const image = canvas.toDataURL('image/png');
    const link = document.createElement('a');
    link.href = image;
    link.download = downloadFileName;
    link.click();
  } finally {
    containerForClone.remove();
  }
};

[killernova]

I also encountered this issue and found that the problem was with Tailwind CSS's preflight. Specifically, the issue was with the reset code, which changed the display attribute of the img tag to block in preflight. To resolve this, I either removed preflight or restored the img tag's display attribute to inline-block in global.css.

Not doing preflight - In my case, tailwind layout was broken.

// tailwind.config.js
module.exports = {
module.exports = {
  corePlugins: {
    preflight: false,
  },
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  ...
}

Restore img tag's display attribute - I choose this solution.

/* global.css */
@tailwind base;
@layer base {
  img {
    @apply inline-block;
  }
}
@tailwind components;
@tailwind utilities;

I hope it helped you a lot.

By using this method in Vue3, the texts shifted up...