Some text disappeared

[mosband]

Bug reports:

When the container width is sufficient, the content of the converted image is normal, but when the width is insufficient causing the text to wrap, the first letter 'A' in the converted image disappeared.

<template>
  <div id="app">
    <div
      ref="content"
      v-html="content"
    />
    <hr>
    <img
      :src="url"
      alt=""
      srcset=""
    >
    <hr>
    <div>
      {{ content }}
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import html2canvas from 'html2canvas';
export default defineComponent({
  data () {
    return {
      content:
        '<p style="line-height: 1;"><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 20px; font-family: Arial;"><strong>A</strong></span><span style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 20px; font-family: Arial;">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</span></p>',
      url: '',
    };
  },
  mounted () {
    this.test();
  },
  methods: {
    async test () {
      const canvas = await html2canvas(this.$refs.content as any, {
        useCORS: true, // 解决图片跨域问题
        allowTaint: true, // 允许跨域图片
        scale: 1,
      });
      this.url = canvas.toDataURL('image/png');
    },
  },
});
</script>
<style lang="scss" scoped>
#app {
  word-break: break-all;
}
</style>

Specifications:

• html2canvas version tested with: 1.4.1
• Browser & version: cef_binary_90.6.7+g19ba721+chromium-90.0.4430.212_windows64
• Operating system: win10 64